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

只需给打开的下拉菜单一个“open”类，然后在应该显示新的下拉菜单时隐藏与该类匹配的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.

Answer 2

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