如何防止导航栏在单击具有下拉菜单的特定菜单项时隐藏/折叠？

Question

我试图防止导航栏在以下代码中单击“ About Us部分或“ Projects部分时崩溃。 我已经在这两个按钮上尝试过event.stopPropagation() ，但是直到执行jQuery代码时，导航栏已经折叠并隐藏起来。

<li class="page-scroll">
   <a href="#home">Home</a>
</li>
<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a>
   <ul class="dropdown-menu" role="menu">
      <li><a href="aboutus.html">Vision</a></li>
      <li><a href="team.html">Founding Team</a></li>
      <!--<li><a href="donors.html">Members</a></li>-->
   </ul>
</li>
<li class="page-scroll">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a>
   <ul class="dropdown-menu" role="menu">
      <li><a href="sample-campaign - vidya.html">Vidya Vistar</a></li>
      <li><a href="sample-campaign - safai.html">Safai Abhyaan</a></li>
      <li><a href="sample-campaign - clothes.html">Clothes Donation</a></li>
      <li><a href="sample-campaign - food.html">Food Donation</a></li>
      <li><a href="sample-campaign - onetime.html">Ad Hoc</a></li>
   </ul>
</li>
<li class="page-scroll">
   <a href="#events">Events</a>
</li>
<li class="page-scroll">
   <a href="#gallery">Gallery</a>
</li>
<li class="page-scroll">
   <a href="#join">Get Involved</a>
</li>

如何在单击“ Projects或“ About Us按钮时防止导航栏隐藏（屏幕尺寸小于992px ）？

Answer 1

las，经过4天的代码浏览，我发现了所有按钮（包括小节（ About Us和Projects ）的标题）的click事件期间被调用的函数。 当您尝试继续由其他人启动的项目时，会发生这种情况。 这是代码：

$('.navbar li').click(function() {
    $('.navbar-toggle:visible').click();
});

我将其更改为：

// Closes the Responsive Menu on Menu Item Click
$('.toggle-responsive').click(function() {
    $('.navbar-toggle:visible').click();
});

并分隔应在其上调用的类：

<li class="page-scroll toggle-responsive">
   <a href="#home">Home</a>
</li>
<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a>
   <ul class="dropdown-menu" role="menu">
      <li class="toggle-responsive"><a href="aboutus.html">Vision</a></li>
      <li class="toggle-responsive"><a href="team.html">Founding Team</a></li>
      <!--<li><a href="donors.html">Members</a></li>-->
   </ul>
</li>
<li class="page-scroll">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a>
   <ul class="dropdown-menu" role="menu">
      <li class="toggle-responsive"><a href="sample-campaign - vidya.html">Vidya Vistar</a></li>
      <li class="toggle-responsive"><a href="sample-campaign - safai.html">Safai Abhyaan</a></li>
      <li class="toggle-responsive"><a href="sample-campaign - clothes.html">Clothes Donation</a></li>
      <li class="toggle-responsive"><a href="sample-campaign - food.html">Food Donation</a></li>
      <li class="toggle-responsive"><a href="sample-campaign - onetime.html">Ad Hoc</a></li>
   </ul>
</li>
<li class="page-scroll toggle-responsive">
   <a href="#events">Events</a>
</li>
<li class="page-scroll toggle-responsive">
   <a href="#gallery">Gallery</a>
</li>
<li class="page-scroll toggle-responsive">
   <a href="#join">Get Involved</a>
</li>

Answer 2

在这里你可以看。 一点棘手的解决方案。 首先，我尝试了bootstarp toogle事件“ hide.bs.popover”（如果需要，您可以检查http://getbootstrap.com/javascript/#collapse ），我不能这样做：(

我只使用jquery现在可以了。 当您单击“ a”引导程序打开下拉菜单，然后将类“ open”添加到“ li”时，解决方案非常简单，因此我检查了“ li”类是否具有“ open”，然后删除了data-toogle属性

 var elementAbout = $(".dropdown a");

elementAbout.click( function() {
    if($("li.dropdown").hasClass("open")){
    elementAbout.removeAttr("data-toggle")
  }
})

https://jsfiddle.net/sercantimocin/v992z8er/3/

Answer 3

希望这是您要实现的目标，添加event hide.bs.dropdown ，通常我们通过event.stopPropagation();停止事件传播event.stopPropagation(); 如果将任何锚点或默认操作绑定到该元素，则需要preventDefault。 如果期望屏幕尺寸小于992px请检查屏幕宽度/高度if (screen.height < '992') { } ，然后执行e.preventDefault(); and e.stopPropagation(); e.preventDefault(); and e.stopPropagation();

 $('.dropdown').on('hide.bs.dropdown', function(e) { e.preventDefault(); e.stopPropagation(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> <ul class="custom"> <li class="page-scroll"> <a href="#home">Home</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="aboutus.html">Vision</a> </li> <li><a href="team.html">Founding Team</a> </li> <!--<li><a href="donors.html">Members</a></li>--> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="sample-campaign - vidya.html">Vidya Vistar</a> </li> <li><a href="sample-campaign - safai.html">Safai Abhyaan</a> </li> <li><a href="sample-campaign - clothes.html">Clothes Donation</a> </li> <li><a href="sample-campaign - food.html">Food Donation</a> </li> <li><a href="sample-campaign - onetime.html">Ad Hoc</a> </li> </ul> </li> <li class="page-scroll"> <a href="#events">Events</a> </li> <li class="page-scroll"> <a href="#gallery">Gallery</a> </li> <li class="page-scroll"> <a href="#join">Get Involved</a> </li> </ul>