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

只需为打开的下拉列表提供一个“打开”类，然后在应该显示新下拉列表时隐藏与该类匹配的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。