Bootstrap 3 导航栏下拉菜单不断链接？

Question

我已经创建了一个 Bootstrap 3 导航菜单，并且正在尝试让子菜单正常工作。问题是每次我单击子菜单下拉菜单时，它都会将我带到 link 而不是打开下拉菜单。例如，我会先点击 "Collections" link，它会打开包含 "Music" 和 "Clothing" 的下拉菜单。但是，如果我单击 "Music" 或 "Clothing" 的下拉菜单 link，它会将我带到 link，而不是打开下拉菜单。

<ul id="menu-primary-right-navigation" class="nav nav-pills nav-justified navbar-right">
    <li role="presentation" class="active dropdown menu-collections">
        <a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="http://cienna/collections/">
            Collections
            <b class="fa fa-caret-down hidden-sm hidden-md hidden-lg"></b>
        </a>
        <ul class="dropdown-menu" role="menu">
            <li role="presentation" class="active dropdown menu-music">
                <a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="http://cienna/product-category/music/">
                    Music
                    <b class="fa fa-caret-down hidden-sm hidden-md hidden-lg"></b>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li class="menu-singles">
                        <a href="http://cienna/product-category/music/singles/">Singles</a>
                    </li>
                    <li class="menu-albums">
                        <a href="http://cienna/product-category/music/albums/">Albums</a>
                    </li>
                </ul>
            </li>
            <li role="presentation" class="dropdown menu-clothing">
                <a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="http://cienna/product-category/clothing/">
                    Clothing
                    <b class="fa fa-caret-down hidden-sm hidden-md hidden-lg"></b>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li class="menu-t-shirts">
                        <a href="http://cienna/product-category/clothing/t-shirts/">T-shirts</a>
                    </li>
                    <li class="menu-hoodies">
                        <a href="http://cienna/product-category/clothing/hoodies/">Hoodies</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="menu-shop">
        <a href="http://cienna/shop/">Shop</a>
    </li>
    <li class="menu-contact">
        <a href="http://cienna/contact/">Contact</a>
    </li>
</ul>

Answer 1

没关系。我忘了我已经放置 Javascript 来停止传播下拉菜单。

jQuery('.dropdown-menu').click(function(e) {
  e.stopPropagation();
});

在阅读了有时不需要停止事件传播之后：http://css-tricks.com/dangers-stopping-event-propagation/

我决定使用以下代码：

  $(function() {
    $('.dropdown').on({
      "click": function(event) {
        if ($(event.target).closest('.dropdown-toggle').length) {
          $(this).data('closable', true);
        } else {
          $(this).data('closable', false);
        }
      },
      "hide.bs.dropdown": function(event) {
        hide = $(this).data('closable');
        $(this).data('closable', true);
        return hide;
      }
    });
  });

Bootstrap 3 导航栏下拉菜单不断链接？

Bootstrap 3 navbar dropdown keeps going to link?

twitter-bootstrap

twitter-bootstrap-3