Question

我创建了一个带有bootstrap导航的导航菜单。我按下移动切换菜单时添加了一个小的jquery代码，它将自动关闭并转到目的地

但如果我在导航中有下拉菜单。此下拉菜单现在无法正常工作。当我按下拉菜单父级进行展开时，它会自动关闭菜单。我无法检查下拉菜单中可用的菜单所以我试图添加一个条件。但它不起作用。

在下拉菜单中，父类具有名为.dropdown-toggle的类。如果这个课程可用，它不应该自动关闭

if (jQuery(".navbar-collapse a").val() !== '.dropdown-toggle') {
    jQuery('.navbar-collapse a').click(function (e) {
        jQuery('.navbar-collapse').collapse('toggle');
    });
}

这里是html代码

<ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>

Answer 1

试试这个，您的父菜单项将起作用，以及移动菜单切换

 <script>
 (function($) {
 jQuery(function($) {
 $('.navbar .dropdown').click(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideToggle();
  }, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });
  $('.navbar .dropdown > a').click(function() {   

    location.href = this.href;
  });
  });
  })(jQuery);
  </script>

Bootstrap导航下拉菜单切换问题

1 个答案: