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

Question

我设法制作了一个脚本，允许我在单击链接时显示和隐藏我的 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。

编辑：评论后