Question

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

点击链接后，相应的下拉列表打开（正常工作）
点击另一个链接后，前一个下拉列表将关闭，css类将被删除（正常工作）
点击已打开的下拉列表的链接，关闭下拉列表（不起作用（关闭并重新打开））
单击正文中的任何位置（因此在链接和下拉列表外部），关闭下拉列表（不起作用）

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

下面的代码是否有意义？

$(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逻辑，似乎可行。

小提琴：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);
}
});

Answer 2

你非常接近。如果它是可见的，我会存储一个标志（这样你就不会在相同的代码上加倍）

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

    var active = false;

    if ( $(this).hasClass('active') )
        active = true;

    $('.dropdown').removeClass('active');
    $('.dropdownbox').hide();

    if ( ! active )
        $(this).addClass('active').find('.dropdownbox').slideToggle(200);
});

jsFiddle：http://jsfiddle.net/fU2BZ/4/

Answer 3

解决第三个问题的简单代码：

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

要解决您的上一期，请执行以下操作：

$('.dropdownbox').click(function (event) {
    event.stopPropagation();
});

如何正确隐藏选定的下拉列表？

3 个答案: