当我点击具有ID“Container_ID”的我的DIV之外的任何位置时,所有容器都会通过
如何改善这个问题? JavaScript(字体:https://codepen.io/marizawi/pen/YgaaMp)
display: none;
隐藏。 我在 JavaScript 中呈现的代码在某种程度上可以工作,因为当我单击Container_ID
内的任何部分时,它返回相同的行为,我的DIV会隐藏。 但是,当我与Container_ID
内部的Controls_CLASS
+ ul、li
+ Checkbox_CLASS
元素交互时,它们不应该被排除在隐藏整个Container_ID
时,因为它们位于其中。如何改善这个问题? JavaScript(字体:https://codepen.io/marizawi/pen/YgaaMp)
window.addEventListener('mouseup', function(event) {
var cont = document.getElementById('Container_ID');
if (event.target != cont && event.target.parentNode != cont) {
cont.style.display = 'none';
}
});
div.Container_CLASS {
width: 50%;
height: 350px;
margin-top: 4px;
margin-left: 4px;
display: block;
position: absolute;
overflow-y: scroll;
}
<div class="Container_CLASS" id="Container_ID">
<div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div>
<ul>
<li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li>
<li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li>
<li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li>
</ul>
</div>