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

Posted 2023-05-09

【中文标题】引导导航下拉菜单切换问题

【英文标题】：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>

【参考方案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>