Question

我点击了一个下拉菜单。当您单击.hello_panel时，我使用切换来激活它的 HTML

<div class="container">
        <div class="login_panel">
            <div class="hello_panel"> 
                <div class="hello_label">Hello </div> 
                <div class="hello_value">foofoo</div> 
            </div> 
        </div>
    </div>

的jQuery

$('.hello_panel').bind('click', function(){
   $('.menu_popup').toggle();
})

如果我点击它可以正常工作，它会在.hello_panel时显示和隐藏效果点击。我想要的是如果单击.hello_panel并在页面上点击除.menu_popup

之外的任何其他内容时隐藏它

Answer 1

只要您点击文档

，就可以隐藏它

的JavaScript

$(document).click(function () {
    $('.menu_popup:visible').hide();
});

$('.hello_panel').bind('click', function (e) {
    $('.menu_popup').toggle();
    e.stopPropagation();
});

HTML

<div class="container">
    <div class="login_panel">
        <div class="hello_panel">
            <div class="hello_label">Hello</div>
            <div class="hello_value">foofoo</div>
        </div>
    </div>
</div>
<div style="display:none" class="menu_popup">menu_popup</div>

演示 http://jsfiddle.net/6bo1rjrt/16/

如果您不想停止传播，另一种方法是传递一个回调函数，该函数将一次性点击监听器注册到该文档以隐藏菜单

$('.hello_panel').bind('click', function () {
    $('.menu_popup').show(function () {
        $(document).one('click', function () {
            $('.menu_popup:visible').hide();
        });
    });
});

演示 http://jsfiddle.net/6bo1rjrt/17/

将jQuery toggle事件委托给文档的其余部分

1 个答案: