在點擊除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

回答

相關問題