jquery選擇除此之外的任何東西及其後代

Question

我想弄清楚如何讓用戶在外面點擊時使菜單消失。 我的方法是這樣的：

$(*).not(menu).bind('click', function() { $(menu).hide() }) 

由於某種原因，這是行不通的。任何想法我可能做錯了什麼？ 謝謝

Answer 1

這

$('*'). 

是邪惡的，瘋了，惡業！

改用

$(document.body).bind('click', function(e){ 
    if(e.target.id !== 'yourmenuid' || $(e.target).parents().is('#yourmenuid')) 
     $('#menuid').hide(); 
}); 

儘量避免通用選擇*在任何時候。 Sizzle確實會查詢標記中所有可用的元素，這些元素非常昂貴。

Answer 2

這是一個壞主意。

寫入$('*')會將您的點擊處理程序添加到文檔中的每個單個元素，這將會很慢。另外，它不會處理稍後添加的任何新元素的點擊。 （除非他們泡了）

相反，你應該處理click事件的根元素，就像這樣：

$(document).click(function(e) { 
    if (e.target === menu || $(e.target).parents().is(menu)) 
     return; 
    $(menu).hide(); 
}); 

任何元素上的所有click事件最終會冒泡的根元素（除非你取消它），所以這將處理每一次點擊。

Answer 3

作爲替代方案，您是否考慮過jQuery.hover？

$('#menu > ul > li').hover(
    function() { $('ul', this).show(); }, 
    function() { $('ul', this).hide(); } 
); 

在mouseover/mouseout上出現/消失是更常見的做法。你甚至可以使用jQuery.slideDown()和jQuery.slideUp()來更順利。

$('#menu > ul > li').hover(
    function() { $('ul', this).slideDown(250); }, 
    function() { $('ul', this).slideUp(100); } 
); 

Answer 4

最快和最簡單的方式來做到這一點：

jQuery(document).delegate(':not(#menu-id)', 'click', function(){ 
    $('#menu-id').hide(); 
}); 

或者：

$(document).click(function(){ 
    if (e.target !== menu && !$.contains(e.target, menu)) { 
     $(menu).hide(); 
    } 
});