JQuery: только одно раскрывающееся меню открылось за один раз

Question

Я собираюсь сделать простое выпадающее меню с некоторым jQuery.

Вот план моего меню:

http://jsfiddle.net/W9c9y/

Это мой JQuery:

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

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

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

А вот это то, что я пытаюсь достичь:

Я хочу, чтобы одно раскрывающееся меню открывалось за раз, любой щелчок меню (вложенные подменю) должен закрыть уже открытое раскрывающееся меню. Конечно, если я нажму на другое раскрывающееся меню, он не только должен закрыть открытое меню, но и упасть.

Я бы очень признателен за любые предложения.

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

Скрипки: - http://jsfiddle.net/W9c9y/8/

Answer 2

Просто дать открытый DropDown класс «открыть», а затем скрыть соответствующие ul элементы с этим классом, когда новый выпадающий должны быть показаны:

$("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.