javascript - 如何正确隐藏选定的下拉菜单？

Question

我正在尝试实现类似于引导按钮下拉菜单( http://twitter.github.io/bootstrap/components.html#buttonDropdowns )的功能，但需要一些轻量级的功能。基本功能或多或少是这样的:

• 点击链接后，相应的下拉 div 将打开(有效)
• 单击另一个链接时，前一个下拉列表将关闭，并且 css 类将被删除(有效)
• 点击打开的下拉列表的链接后，关闭下拉列表(不起作用(关闭并重新打开))
• 点击正文中的任意位置(即在链接和下拉菜单之外)，关闭下拉菜单(不起作用)

这背后的逻辑应该是什么？

演示: http://jsfiddle.net/fU2BZ/

下面的代码有意义吗？

$(document).click( function(){
    $('.dropdownbox').hide(0);
    $('.dropdown').removeClass('active');
});

$('.dropdown').click( function(event){        
    event.stopPropagation();
    $('.dropdown').removeClass('active');
    $('.dropdownbox').hide();
    $(this).addClass('active').find('.dropdownbox').slideToggle(200);
});

Answer 1

对代码进行了一些更改，添加了一些 if else 逻辑，似乎有效。

fiddle :http://jsfiddle.net/fU2BZ/1/

代码:

$('.dropdown').click( function(event){        
event.stopPropagation();

if ($(this).hasClass("active")) {
    $('.dropdown').removeClass('active');
    $('.dropdownbox').hide();
} else {
    $('.dropdownbox').hide();
    $(this).addClass('active').find('.dropdownbox').slideToggle(200);
}
});