Question

I have the following javascript that opens drop down menus by adding the class “dropped” when links in my navigation are clicked.

$("li.dropdown-control > a").click( function () {
          var nextSibling = $(this).next();
              nextSibling.toggleClass("dropped");  
 });

My problem is that when one dropdown is open, it does not close when you click to open another. How do I find the dropdown that is open and close it when another is opened?

Answer 1

If you only want one dropdown open at any point, you may want to remove the dropped class from everything that is marked as ‘dropped’ before. Here’s what I would do…

$("li.dropdown-control > a").click( function () {
      $('.dropped').removeClass('dropped');
      var nextSibling = $(this).next();
          nextSibling.toggleClass("dropped");  
});