2

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>
JustBlossom
  • 1,259
  • 3
  • 24
  • 53

0 Answers0