Question

我创建了一个Bootstrap 3导航菜单，并试图让子菜单工作。问题是每次我点击子菜单下拉菜单时，它都会转到链接而不是打开下拉列表。例如，我首先点击＆＃34; Collections＆＃34;链接，它会打开＆＃34; Music＆＃34;和＆＃34;服装＆＃34;在里面。如果我点击＆＃34; Music＆＃34;的下拉链接或者＆＃34;服装＆＃34;但是，它会带我到链接而不是打开下拉菜单。

<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导航栏下拉菜单继续链接？

1 个答案: