爲什麼點擊圓形圖像，div不使用JavaScript切換？

-1

爲什麼點擊圓形圖像，div不使用JavaScript切換？爲什麼點擊圓形圖像，div不使用JavaScript切換？

當我點擊灰色方塊時，它會切換正常。

但爲什麼切換不起作用，當點擊圓形圖像。我該如何工作。

<img src="http://images.wikia.com/gtawiki/images/archive/3/3e/20090730000919!PS3_Circle.png" style=" border: none;" id="image_test" onclick="showDivtest('div1')" />

http://jsfiddle.net/a3MKG/40/

<script> 
function showDiv(id) {  
    $("#div1").toggle(); 
}  

$(document).click(function(e) { 
    if(!$('#image_test').is(e.target)) 
     $("#div1").hide(); 
}); 
</script>

來源

2015-03-19 robert derwery

我找不到'showDivtest'函數在你的代碼中，幫我找到它 – 2015-03-19 11:32:46

對於初學者你的HTML是無效的。你不能在HTML中重複'ID ='值，因爲jQuery/Javascript只能看到第一個。 – 2015-03-19 11:47:47

你有幾個問題。重複的ID是無效的HTML（我從IMG中刪除它）。您還應該避免將內聯點擊處理程序與jQuery事件處理程序混合在一起（只需使用jQuery處理程序處理所有事件）。此外，您需要停止原始打開的點擊傳播到document，因爲這會立即關閉它。

這裏是一個清理簡化版本：

JSiddle：http://jsfiddle.net/a3MKG/54/

$('#image_test').click(function (e) { 
    e.stopPropagation(); 
    $("#div1").toggle(); 
}); 

$(document).click(function (e) { 
    if ($(e.target).closest("#div1").length == 0) { 
     $("#div1").hide(); 
    } 
});

我使用closest來確定點擊的元素被顯示的選項，或這些選項的後代（所以點擊一個LI或UL將做同樣的工作）。

來源

2015-03-19 12:05:17

爲什麼點擊圓形圖像，div不使用JavaScript切換？

回答

相關問題