I have a navigation menu that I created using Bootstrap 3. The menu has two dropdowns. Here is how I want it to behave:
- Click menu 1 > dropdown menu appears
- Click menu 2 > menu 1 closes > menu 2 dropdown appears
Here is what is actually happening:
- Click menu 1 > dropdown menu appears
- Click menu 1 again to close it
- Click menu 2 to open it
What I have tried:
There is a similar question here: Avoid having to double-click to toggle Bootstrap dropdown. The solutions seemed specific to using angular with bootstrap, but I tried them anyway. Here is what happened:
One solution mentions getting rid of bootstrap.min.js. That solution is for Bootstrap 4.
A second solution includes stopping default behavior of the dropdown this way:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
But if I add that, the dropdowns don't work at all. When I click them, nothing happens.
The last solution I tried included removing data-toggle="dropdown"
. That resulted in the dropdowns not showing up at all as well.
Question:
Does anyone have a solution for how to remove the double click functionality so that I don't have to double click to close one menu before I can open another? I am just using Bootstrap (not angular and bootstrap), and I am using Bootstrap 3.
My code:
Don't know if this is helpful, but here is my navigation bar code:
<nav>
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Option 1<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option1menu">
<li><a href="link.php">Link</a></li>
<li><a href="link.php">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" >Option 2<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option2menu">
<li><a href="link.php">Link</a></li>
<li><a href="link.php">Link</a></li>
</ul>
</li>
</ul>
</nav>