CODEWITHSUNDEEP
jquerydrop-down-menu
user1836025
user1836025

Reputation: 209

close open dropdown when clicking to open another

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?

Upvotes: 1

Views: 8111

Answers (3)

Codegiant
Codegiant

Reputation: 2150

Try this

JS CODE

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

LIVE DEMO

Upvotes: 0

riceroni
riceroni

Reputation: 56

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");  
});

Upvotes: 1

StuR
StuR

Reputation: 12238

Can't you remove all the dropped classes before toggling the one that you want open:

e.g:

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

Upvotes: 2

Related Questions