如何隱藏div如果用戶在頁面上的任何地方除了2個元素使用jQuery？

我有以下的標記：如何隱藏div如果用戶在頁面上的任何地方除了2個元素使用jQuery？

<a href="" id="clickMe">Click Me</a> 

<div id="foo" style="border:1px solid red; display:hidden"></div>

我的代碼，以獲得「foo」的DIV上顯示點擊。

$('#clickMe').click(function(e) { 
    $('#foo').show(); 
    e.preventDefault(); 
});

現在，我怎麼又隱藏DIV IF THE USER任何地方點擊頁面除了DIV本身還是按我的鏈接？

注意：我需要能夠在不更改標記的情況下執行此操作。

來源

2011-06-07 Tommy

大寫鎖定+大膽=嚴重 – 2011-06-07 19:04:53

顯然這是他的標準的一個重要組成部分。我會確保在我的回答中解決它。 – 2011-06-07 19:05:39

@Greg大聲笑，以及這是一個非常嚴重的問題：p – Tommy 2011-06-07 19:07:21

$('#clickMe').click(function(e) { 
    $('#foo').show(); 
    e.preventDefault(); 
}); 


$("#clickMe, #foo").mouseup(function(){return false;}); 

$(document).mouseup(function(e){//removes menu when clicked on any other part of page 
    if($("#foo:visible").length > 0 ){ 
     $('#foo').hide(); 
    } 
});

Example on JSFIDDLE.net

來源

2011-06-07 19:16:29 LoneWOLFs

試試這個：

$(document).click(function() {  
    $("#foo").hide(); 
}); 

$("#foo, #clickMe").click(function() {  
return false; 
});

來源

2011-06-07 19:07:32 Chandu

比我的解決方案更優雅，但我認爲你應該在'return false;'前添加'$（'＃foo'）。show（）;' – 2011-06-07 19:10:05

@Peter （已發佈在他的問題中） – Chandu 2011-06-07 19:13:14

$('#clickMe, #foo').click(function() { 
    $('#foo').show(); 
    return false; 
}); 

$(":not(#clickMe, #foo)").click(function() { 
    $('#foo').hide(); 
});

檢查出來的JSFiddle。

來源

2011-06-07 19:08:44

將事件處理程序綁定到除#clickMe和#foo之外的每個元素都對性能不利，特別是在具有大量元素的頁面上。將它綁定到文檔會更好。 – simshaun 2011-06-07 19:29:18

您可以put a click handler在document.body，因此它可以從頁面上的每個元素獲得點擊。您可以檢查target property of the event object以查看實際點擊的內容，如果它沒有這兩個元素的ID，您可以hide您的<div>。

$(document.body).click(function(event){ 
    var targetID = $(event.target).attr("id"); 
    if(targetID !== "clickMe" && targetID !== "foo"){ 
     $("#foo").hide(); 
    } 
});

Try it out!

來源

2011-06-07 19:11:00 Adam

如何隱藏div如果用戶在頁面上的任何地方除了2個元素使用jQuery？

回答

相關問題