单击潜水内部时隐藏潜水

Hiding Div When Clicking Inside Div

本文关键字：潜水 隐藏 内部 单击      更新时间：2024-06-21

我有这样的代码，当你点击某个东西时，会出现一个隐藏的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>

您只需在div覆盖本身上添加相同的切换调用：

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

jsFiddle示例

添加一个onclick函数。

HTML:

<div id="mainDiv">
    testing
</div>

JavaScript:

var mainDiv = document.getElementById('mainDiv');
mainDiv.style.cursor = 'pointer';
mainDiv.onclick = function() {
    mainDiv.style.display = "none";
}

jsfiddle样本

如果您想在两个分隔符之间进行替换，请参见此示例。

相关文章：