Question

我正在尝试将下拉列表与Dropbox仪表板非常相似，如果您单击用户名，则会显示弹出菜单。再次单击用户名将关闭弹出按钮（每次单击时切换它）。

需要注意的是，在弹出按钮上点击除之外的任何地方也会关闭它。

到目前为止，我的工作差不多，但不是100％。如果直接单击实际的“body”元素，它将按原样关闭弹出按钮。我的意思是我的网站有一个.wrapper元素，它不占用页面的整个高度。底部是一条薄薄的条带，没有覆盖它的实际元素，只有<body>标签。 .wrapper或其他元素占用空间的任何地方（即使是100％宽度的隐形包装），如果你点击任何有元素的东西（除了正文），它也不会关闭窗口。

的javascript：

// FLYOUT menu $flyout = $('.flyout ul'), flyoutDuration = 120; $('.flyout h3 a').click(function(e) { e.preventDefault(); $flyout.fadeToggle(flyoutDuration); }); $(document).on('click',function(e) { if ( $(e.target).parents($flyout).length === 0 ) { $flyout.fadeOut(flyoutDuration); } });

HTML

<body> <div class="blackbar"> <div class="container clearfix"> <a href="/"><div class="icon logo"></div></a> <div class="flyout"> <h3> Welcome back, <a href="#">username</a> </h3> <div class="menu"> <ul> <li><a href="#"><div class="users"></div>Users</a></li> <li><a href="#"><div class="groups"></div>Groups</a></li> <li><a href="#"><div class="configuration"></div>Configuration</a></li> <li><a href="#"><div class="logout"></div>Logout</a></li> </ul> </div> </div> </div> </div> <div class="wrapper"> <! -- content here --> </div> </body>

预期的行为应该是您点击的任何元素，不是.flyout的后代应该关闭窗口（包括.blackbar，徽标等）

Answer 1

说实话 - 当我做这样的事情并且我不希望“框”内的点击关闭元素时 - 我防止点击冒泡。

// FLYOUT menu 
$flyout = $('.flyout ul'),
 flyoutDuration = 120;

$('.flyout h3 a').click(function(e) {
    e.preventDefault();
    $flyout.fadeToggle(flyoutDuration);
});

$('.flyout').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
});

$(document).on('click',function(e) { 
  if(flyout-open) {
        $flyout.fadeOut(flyoutDuration); 
    }
});

Answer 2

Jquery菜单点击 - 在点击正文上的任意位置将关闭菜单

在我的情况下，如果点击主链接或链接外部，即html / body上的任何位置，我想关闭下拉菜单

http://jsfiddle.net/austinnoronha/k2Lwj/

var toggleClick = function(){

    var divObj = $(this).next();
    var nstyle = divObj.css("display");

    if(nstyle == "none"){
        divObj.slideDown(false,function(){
            $("html").bind("click",function(){
                divObj.slideUp();
                $("html").unbind("click");
            });
        });
    }
};

$(".clickme").click(toggleClick);

如何正确处理'body'jquery事件以关闭下拉列表

2 个答案: