Question

I am trying to make a drop down menu and want all other open menus to have a class removed when a different menu appears. the problem is, is that you have to click twice on a menu you previously clicked on to get it to open again:

$(document).ready(function(){
$('li.dropdown').click(function(){
    //$('.dropdownmenu').hide() ;
    $('.dropdownmenu').not('ul', this).removeClass('opened');
    if($(' ul', this).hasClass('opened'))
    {
        $(' ul', this).removeClass('opened');
        $(' ul', this).hide();
    }
    else
    {
        $(' ul', this).addClass('opened') ;
        $(' ul', this).show() ;
    }

})
})

---

Here it is in JSFiddle, click on the Item text to make the menus pop up, if you open and close a few the problem will become apparent. If you know a better way of doing what I’m trying to achieve please let me know!

And yes you can if you like 😛 she’s my favourite haha

---

Also, the menu should close if you click on the menu item again.

Answer 1

When I need to do this I usually remove the class from everything, without worrying about the one that should keep it, same with hiding the element.

Then simply add the necessary class to the clicked on element and show it.

If you do need to do not, then do:

var ul = $(this).closest('ul');

and then use the variable in not().

You actually have things reversed – you are looking for a ul inside an li, which is the opposite of what it should be.