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

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>

如何992px在单击Projects或About Us按钮时阻止导航栏的隐藏(屏幕尺寸小于)？

Answer 1

唉，经过 4 天的代码检查，我发现了在所有按钮的单击事件期间调用的函数，包括小节的标题 (About Us和Projects)。当您尝试继续由其他人启动的项目时，就会发生这种情况。这是代码：

$('.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>