单击以显示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以隐藏

回答

相关问题