[英]click to show div, click again to hide, or click outside the div to hide
i have managed to make a script that allows me to show and hide my div when i click a link, but i also want it to hide the div when i click outside the div.... how do i manage such thing? 我设法制作了一个脚本,当我单击链接时可以显示和隐藏div,但是当我在div之外单击时,我也希望它隐藏div。
<script>
function toggle() {
var ele = document.getElementById("dropdown");
var text = document.getElementById("trigger");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Kontakta oss";
}
else {
ele.style.display = "block";
text.innerHTML = "Kontakta oss";
}
}
</script>
You need to listen to clicks on the document. 您需要聆听对文档的单击。
var ele = document.getElementById("dropdown");
document.addEventListener("click", function(event){
var childClicked = [].slice.call(ele.getElementsByTagName('*')).some(function(node) {
return node === event.target;
});
if(event.target !== ele && !childClicked){
ele.style.display = "none";
}
});
I am using document here but you can choose whatever fits your needs with document.querySelector for example. 我在这里使用文档,但是您可以使用document.querySelector选择适合您需要的任何内容。
edit:after comment 编辑:评论后
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.