Question

I have this script that opens dropdowns under my navigation items.

Right now, when a navigation item is clicked, the drop down will open. When I click the same item again it will not close.

I am able to close it only if I click on another navigation item to open another dropdown.

How can I get the current navigation item to close when I click it, while keeping the functionality of it closing when other navigation items are clicked?

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

Answer 1

Looking at your code:

    $('.dropped').removeClass('dropped');
    var nextSibling = $(this).next();
    nextSibling.toggleClass("dropped");  

this will remove ALL the dropped classes (including the one you just clicked on, if it’s already dropped open) and then add it back to the same element. That’s why it never seems to close — you actually close and open it again immediately.

Try this instead:

    var nextSibling = $(this).next();
    nextSibling.toggleClass("dropped");  
    $('.dropped').not(nextSibling).removeClass('dropped');