在点击除div以外的其他主体时隐藏div

我想在div以外的页面主体上单击时隐藏所有div的隐藏。我的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格将向下滑动。我需要在点击settingsBoxExpand div以外的任何其他位置时隐藏此选项。我有3个更多类似的div。已尝试

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

但它不工作。 “不”不适用于我。在此先感谢。

来源

2012-02-22 Krishna Raj K

你的代码试图筛选没有settingsBoxExpand'的'的ID（这是大多数'发现到那些body'元素列表可能为零，除非你有一个'body'元素id）。 – Jasper 2012-02-22 06:48:10

您需要设置体（或文件），以隐藏点击框和冒泡DOM和触发身体click事件停止对格单击事件：

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

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

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

事件捕获和冒泡对于理解更高级的事件处理很重要;这里是一个有点阅读如果你有兴趣：

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

来源

2012-02-22 06:38:49

谢谢。这一个为我工作。 – 2012-02-22 06:55:54

你好，它没有jQuery的工作？ – 2013-05-31 01:58:59

@JosuaMarcelChrisano是的，你可以在没有jQuery的情况下完成这项工作，但浏览器会以不同的方式处理事件绑定和事件冒泡消除。如果你想轻松支持多种浏览器，那么使用jQuery是一个不错的选择。 – 2013-06-03 15:54:59

在点击除div以外的其他主体时隐藏div

回答

相关问题