Prabhjot Rai Prabhjot Rai - 3 months ago 27
jQuery Question

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

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

Alas, after 4 days of going through the code, I found the function that was being called during the click event of all the buttons, including the headers of subsections (About Us and Projects). This happens when you try to continue a project which was started by someone else. Here was the code:

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

I changed it to:

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

And sepecified the classes where it should be called on:

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