javascript - 使用 jquery 的下拉导航链接未在 mvc 中加载有效的 anchor 链接

Question

这是我的 html 代码:

    <div class="wrapper-demo">
      <div id="dd" class="wrapper-dropdown-3" tabindex="1">
         <span>The Dropdown</span>
         <ul class="dropdown">
            <li>@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })</li>
            <li>@Html.ActionLink("Company Information", "Details", "Employer",routeValues: new {id = Model.ID },htmlAttributes: null)</li>
            <li>@Html.ActionLink("Post Opening", "Create", "Opening")</li>
            <li>@Html.ActionLink("View Opening", "Details", "Opening")</li>
            <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
        </ul>
   </div>

我的示例 jquery 代码来自:

function DropDown(el) {
      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('ul.dropdown > li');
      this.val = '';
      this.index = -1;
      this.initEvents();
   }
   DropDown.prototype = {
      initEvents : function() {
          var obj = this;
          //show dropdown items on click
          obj.dd.on('click', function (event) {
          $(this).toggleClass('active');
      });
      obj.opts.on('click', function () {
         var opt = $(this);
         obj.val = opt.text();
         obj.index = opt.index();
         obj.placeholder.text(obj.val);
      });
   },
   getValue : function() {
      return this.val;
   },
   getIndex : function() {
     return this.index;
   }
  }
  $(function() {
    var dd = new DropDown( $('#dd') );
    $(document).click(function() {
    // all dropdowns
       $('.wrapper-dropdown-3').removeClass('active');
    });
  });

问题:该代码的工作方式类似于静态 href 代码，但它有一个有效的 anchor 链接可供导航。我怎样才能让它工作？

Answer 1

我已经能够让它工作了。所需要做的就是添加 event.stopPropagation()。这是唯一需要修复的部分:

DropDown.prototype = {
   initEvents: function () {
       var obj = this;
       obj.dd.on('click', function (event) {
          $(this).toggleClass('active');
          event.stopPropagation();
          //return false;
          ...