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

delegate jQuery toggle event to the rest of the document

本文关键字：文档 余部 jQuery 事件      更新时间：2023-09-26

我有一个点击激活的下拉菜单。当你点击.hello_panel时，我使用toggle来激活它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 之外的任何其他内容，它就会隐藏起来

您可以在单击文档时隐藏它

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>

Demohttp://jsfiddle.net/6bo1rjrt/16/

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

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

Demohttp://jsfiddle.net/6bo1rjrt/17/

相关文章：