JQuery: only one drop down menu opened at a time

Question

I’m about to make a simple drop down menu with some jQuery.

Here is the blueprint of my menu:

http://jsfiddle.net/W9c9y/

This is my jQuery:

$( "a.drop_down" ).click(function () {

if ( $(this).siblings("ul").is( ":hidden" ) ) {
$(this).siblings("ul").slideToggle('slow','easeOutBounce');
} 

else {
$(this).siblings("ul").hide();
}
});

And here is the thing what I’m trying to achieve:

I only want one drop down menu to be opened at a time, any menu click (sub-menus included) should close the already opened drop down menu. Of course, if I click another dropdown menu, not only should it close the opened menu, but drop down as well.

I would really appreciate any suggestion.

Answer 1

    $( "a.drop_down" ).click(function () {
    if ( $(this).siblings("ul").is( ":hidden" ) ) {
    $(".main_list ul").hide();
    $(this).siblings("ul").slideToggle('slow','easeOutBounce');
    } 

    else {
    $(this).siblings("ul").hide();
    }
    });

Fiddle:- http://jsfiddle.net/W9c9y/8/

Answer 2

Simply give the open dropdown a class of "open", then hide matching ul elements with that class when a new dropdown should be shown:

$( "a.drop_down" ).click(function () {
    var $ul = $(this).siblings("ul");
    if ( $ul.is( ":hidden" ) ) {
        $('.open').hide();
        $ul.addClass('open').slideToggle('slow','easeOutBounce');
    } 
    else {
        $ul.hide();
    }
});

JSFiddle demo.