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

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/