單擊以顯示div，再次單擊以隱藏或單擊外部div以隱藏

我設法創建了一個腳本，允許我在單擊鏈接時顯示和隱藏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>

來源

2015-12-08 Per Källström

的可能的複製（http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside- an-element） – lex82

[如何關閉隱藏DIV點擊外部（但不在裏面）]的可能重複]（http://stackoverflow.com/questions/6140278/how-to-close-hide-div-clicking-外部 - 但不在裏面） – Markasoftware

您需要聆聽點擊文檔。

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例如。

編輯：？如何檢測一個點擊的元素外]評論後

來源

2015-12-08 21:24:40 pethel

這是部分正確的，但是當你點擊div時，這段代碼仍然會關閉。不只是在它之外。 – AtheistP3ace

是的，這是真的。他將不得不檢查被點擊的元素。 – pethel

單擊以顯示div，再次單擊以隱藏或單擊外部div以隱藏

回答

相關問題