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

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

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>