0

我正在尝试实现类似于引导按钮下拉菜单（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);
});
4

3 回答 3

4

对您的代码进行了一些更改，添加了一些 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);
}
});
于 2013-05-02T15:39:20.977 回答
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/

于 2013-05-02T15:42:46.470 回答
2

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

$('.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();
});
于 2013-05-02T16:13:07.733 回答