單擊以顯示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選擇適合您需要的任何內容。

編輯：評論后