单击内部 Div 时隐藏 Div
Hiding Div When Clicking Inside Div
我有这样的代码,当你点击某个东西时,一个隐藏的 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>
添加一个onclick
函数。
HTML:
<div id="mainDiv">
testing
</div>
JavaScript:
var mainDiv = document.getElementById('mainDiv');
mainDiv.style.cursor = 'pointer';
mainDiv.onclick = function() {
mainDiv.style.display = "none";
}
如果您想在两个分频器之间进行选择,请参阅 this example。
您可以只在 div 覆盖本身上添加相同的切换调用:
<div id="about" onclick="toggle()" style="display: none;">Text here</div>
我有这样的代码,当你点击某个东西时,一个隐藏的 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>
添加一个onclick
函数。
HTML:
<div id="mainDiv">
testing
</div>
JavaScript:
var mainDiv = document.getElementById('mainDiv');
mainDiv.style.cursor = 'pointer';
mainDiv.onclick = function() {
mainDiv.style.display = "none";
}
如果您想在两个分频器之间进行选择,请参阅 this example。
您可以只在 div 覆盖本身上添加相同的切换调用:
<div id="about" onclick="toggle()" style="display: none;">Text here</div>