Question

我想在点击除div之外的页面正文时隐藏所有div的隐藏。我的div是

<div id="settingsBoxExpand">
                    <div id="settings1" class="settingsBoxExpandItem" style="padding:3px;border-bottom:1px solid #dddddd">My Account</div>
                    <div id="settings2" class="settingsBoxExpandItem" style="padding:3px;border-bottom:1px solid #dddddd">Preferences</div>
                    <div id="settings3" class="settingsBoxExpandItem" style="padding:3px;">Logout</div>
                </div>

并且单击settingsBoxExpand div将向下滑动。我需要在clickBoxExpand div之外的任何其他位置隐藏它。我还有3个类似的div。试图

$('body:not(#settingsBoxExpand)').click(function(){
            $("#settingsBoxExpand").hide();
        });

但它不起作用。 “不”对我不起作用。提前谢谢。

Answer 1

您需要设置正文（或文档）以在点击时隐藏框并停止div上的点击事件，从而冒泡DOM并触发正文点击事件：

$('body').click(function(){
    $("#settingsBoxExpand").hide();
});

$('#settingsBoxExpand').click(function(event) {
    event.stopPropagation();
});

通过将.hide（）作为正文的点击处理程序的一部分，当点击事件冒泡DOM并到达正文时，它将隐藏div。使用.stopPropagation可以防止事件到达身体。

事件捕获和冒泡对于理解更高级的事件处理非常重要;如果你有兴趣，可以多阅读一下：

http://www.quirksmode.org/js/events_order.html

单击div之外的其他部分隐藏div

1 个答案: