Question

I’m setting up multiple jQuery based dropdown menus on one page, based on the following tutorial: http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx.

I’ve modified the code on several places now and I’ve come up with the following solution: http://jsfiddle.net/NcNHf/2/.

It’s working pretty well, but I’m looking for a way to close the other dropdown menus which are still open when I’m clicking on another one.

So how can I make sure only one dropdown menu can be activated on the page at all times?

Thanks in advance!

Answer 1

You can select all dropdowns and filter out current, then hide them all.

$(".dropdown > dt a").click(function (e) {
    var $ul = $(this).parent().next().find('> ul').toggle();
    $('.dropdown ul').not($ul).hide();
    e.preventDefault();
});

Working example