Question

我试图找出如何使目标元素消失。如果单击该元素之外的任何位置。我已经使用按钮创建了一个切换效果，但如果ex之外有任何点击，我还想隐藏id ex。我有

找到了关于这个主题的工作资料，但它大部分时间都是基于jQuery的。我没有反对jQuery我只需要在纯JS结构中执行此操作个人原因。

＆＃13;

<!DOCTYPE html>
<html>
<head>

<style>
#ex{
display: none;
}
</style>

<script>
  document.addEventListener('DOMContentLoaded',function(){
    var b= document.getElementsByTagName('button')[0];
    b.addEventListener('click',fx);
function fx() {
    var x = document.getElementById("ex");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}
  });
</script>
</head>
<body>
<button>Toggle</button>
<h1 id="ex">Blablablablabla bla bla JS</h1>
 </body>
</html>

＆＃13;

更新每当我试图在很多网站上就这个主题提出这个问题时，我都不会理解我的意思。换句话说，我不希望身体做任何切换只是按钮最好的方式我可以解释这就像这样你知道在某些应用程序中如果你点击一个下拉菜单，你点击一边的那个下拉菜单然后它消失但你可以使用导航栏按钮把它带回来？这就是我想要做的事情。

我想要这样的东西，但是在纯粹的JS结构中。

＆＃13;

<style>
  #ex{
    display: none;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){ 
$('#ex').click(function(execute){
    execute.stopPropagation();
});
$('button').click(function(execute) {
    execute.preventDefault();
    execute.stopPropagation();
    $('#ex').toggle();
});
$(document).click(function() {
    $('#ex').hide();
});
    });
</script>
<button>Toggle</button>
<h1 id='ex'>Blablablablabla bla bla JS</h1>

＆＃13;

Answer 1

＆＃13;

  <!DOCTYPE html>
    <html>
    <head>
    
    <style>
    #ex{
    display: none;
    }
    </style>
    
    <script>
  document.addEventListener("click", function(obj){
     var x = document.getElementById("ex");
    if(obj.target.id != "ex") {
        if (x.style.display === "block") {
            x.style.display = "none";
        } else  if(obj.target.id == "btn") {
            x.style.display = "block";
        }
    }
  });
    </script>
    </head>
    <body>
    <button id="btn">Toggle</button>
    <h1 id="ex">Blablablablabla bla bla JS</h1>
     </body>
    </html>

＆＃13;

Answer 2

<强>更新

您可以保存按钮ID并将其与点击的元素ID进行比较。

{{1}}

如果你点击它之外的任何地方，使id ex消失

2 个答案: