Question

I am trying to prevent the navbar collapse on click the About Us section or Projects section in the following code. I have tried event.stopPropagation() on these two buttons, but when till the time the jQuery code executes, the navbar has already collapses and hides itself.

<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>

How to prevent this hiding of navbar (on screen size less than 992px) on clicking the Projects or About Us buttons?

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>

Answer 2

在这里你可以看看。有点棘手的解决方案。首先我尝试了bootstarp toogle事件＆＃34; hide.bs.popover＆＃34; （如果你愿意，你可以检查http://getbootstrap.com/javascript/#collapse）我不能这样做：（

我只使用jquery现在它是有效的。点击＆＃34; a＆＃34;解决方案非常简单bootstrap open dropdown然后添加class＆＃34; open＆＃34;到＆＃34; li＆＃34;所以我查了一下＆＃34; li＆＃34;班级已打开＆＃34;打开＆＃34;然后我删除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();停止事件传播，如果绑定任何锚点或默认操作，则需要preventDefault对元素。预计屏幕尺寸小于992px，请检查屏幕宽度/ heihgt为if (screen.height < '992') { }，然后执行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>

How to prevent navbar hiding/collapsing on clicking a particular menu-item which has a dropdown class?

3 个答案: