Javascript 单击以显示div，再次单击以隐藏，或在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>

函数切换（）{
var ele=document.getElementById（“下拉菜单”）；
var text=document.getElementById（“触发器”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“Kontakta oss”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“Kontakta oss”；
}
} 

您需要收听对文档的单击

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，但您可以使用document.querySelector选择任何适合您需要的内容

---

编辑：注释后

此代码的可能重复部分正确，但当您单击div时，此代码仍将关闭。不只是在外面。是的，这是真的。他必须检查单击了什么元素。