我试图防止点击 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
按钮?
最佳答案
唉,经过 4 天的代码检查,我发现了在所有按钮的单击事件期间调用的函数,包括小节的标题(关于我们
和 项目
)。当您尝试继续由其他人启动的项目时,就会发生这种情况。代码如下:
$('.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>
关于jquery - 如何防止导航栏在单击具有下拉类的特定菜单项时隐藏/折叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39256517/