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

How to properly hide selected dropdown?

本文关键字：下拉菜单 何正确 隐藏      更新时间：2023-09-26

我试图实现类似于引导按钮下拉(http://twitter.github.io/bootstrap/components.html#buttonDropdowns)，但需要一些轻量级的东西。基本功能大致如下:

  • 点击链接，相应的下拉div打开(works)
  • 点击另一个链接时，前面的下拉菜单关闭，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);
});

对你的代码做了一些改变，添加了一些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);
}
});

你很接近了。如果标志是可见的，我会存储它(这样你就不会重复使用相同的代码)

$('.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/

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

$('.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();
});
相关文章：