Marius Poiata Marius Poiata - 2 months ago 6
CSS Question

How to not toggle all menus at the same time

I'm working with Boostrap for the first time ever, please don't kill me :D
I have a problem with my navigation bar. I have 7 menus, each with a dropdown of its own. The problem is that when I click on a menu, they all dropdown at the same time, and I need only to dropdown the one I clicked on. My JS code is pretty rudimentary.
This is what I used so far:

$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});


And the HTML code is this, (example for one menu; each menu has a similar code):

<li class="dropdown">
<a href="#" class="dropdown-toggle">Organizare <b class="caret"></b</a>
<ul class="dropdown-menu">
<li><a href="#">Conducere</a></li>
<li><a href="#">Consiliu</a></li>
<li><a href="#">Departamente</a></li>
<li><a href="#">Administratie</a></li>
<li><a href="#">Secretariat</a></li>
</ul>
</li>


What do I need to change so that only the menu I click on dropdown ?

Thanks!

Answer

Find the menu following the toggle:

$('.dropdown-toggle').click(function() {
  $(this).next('.dropdown-menu').toggle();
});

Example: http://codepen.io/paulroub/pen/YXKzGm

Comments