Question

I’m using a HTML structure similar to this

<ul class="top-level">
   <li><a href="#"></a>
       <ul class="dropdown">
          <li><a href="#"></a>
          </li>
       <ul>
   <li>
</ul>

With jQuery like this

$(".top-level").on("click", "a", function() {
  $(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

Except that after clicking on one link to bring down a dropdown, when I click on another top-level link to bring down another dropdown, the first dropdown doesn’t disappear. Is there a way to select all other elements in .dropdown except for the one i want and ask them to hide themselves?

Thanks in advance

Answer 1

$(".top-level").on("click", "a", function() {
  var theDrop = $(this).next("ul.dropdown"); //convert dropdown in question to var
  theDropState = theDrop.is(':visible'); //record current state of dropdown
  $("ul.dropdown").hide(); //hide all dropdowns
  if(!theDropState){ theDrop.show(); } //if state was invisible, show dropdown
});

This method is stateless and will set up the correct conditions every time. With using toggle you risk doing things like $('ul.dropdown').toggle(); causing all drop-downs to show at once.