javascript - 单击内部 Div 时隐藏 Div

Question

我有这样的代码，当您单击某些内容时，会出现一个隐藏的 div，但让 div 消失的唯一方法是单击它的外部。我想知道是否有一种方法可以让您能够单击 div 本身以使其消失。

Java:

function toggle() {
var ele = document.getElementById("about");
//var text = document.getElementById("displayText");
if(ele.style.display == "block") {
    ele.style.display = "none";
    //text.innerHTML = "show";
}
else {
    ele.style.display = "block";
    //text.innerHTML = "hide";
}
}

CSS:

#about {height: 100%; width: 100%; background: rgba(0, 0, 0, 0.6); position: fixed; bottom: 0px; left: 0px;}

HTML:

<a id="displayText" href="javascript:toggle();"><img src="http://companionplants.com/images/small-plant2.jpg"></a>

<div id="about" style="display: none;">
Text here
</div>

Answer 1

您可以在 div 叠加层本身上添加相同的切换调用:

<div id="about" onclick="toggle()" style="display: none;">Text here</div>

<强> jsFiddle example