引导导航下拉菜单切换问题答案

【问题标题】：Bootstrap nav dropdown menu toggle issue引导导航下拉菜单切换问题
【发布时间】：2015-08-30 12:45:23
【问题描述】：

我创建了一个带有引导导航的导航菜单。当我按下移动切换菜单时，我添加了一个小的 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>

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案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>

【讨论】：