单击可显示 div，再次单击可隐藏，或单击 div 外部可隐藏

Question

我已经设法制作了一个脚本，允许我在单击 link 时显示和隐藏我的 div，但我也希望它在我单击 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>

Answer 1

您需要监听对文档的点击。

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";
  } 
});

我在这里使用的是文档，但您可以选择适合您需要的任何内容，例如 document.querySelector。

编辑：评论后

单击可显示 div，再次单击可隐藏，或单击 div 外部可隐藏

click to show div, click again to hide, or click outside the div to hide

javascript

togglebutton