javascript - 如何通过jquery在外部点击时隐藏div，除了一个内部div

Question

这只是一个示例代码，我想在单击按钮时隐藏带有 id="img"的 div 以及带有 id="img"的外部 div

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img">
<button id"imgoption"> click here</butoon>
</div>

这是脚本

<script>
 $(document).on('click', function(e) { // Hides the div by clicking any where in the screen

      if ( ! $(e.target).closest('#img').length ){
            $('#imgoption').hide();
        }
        if ( $(e.target).closest('#img').length ) {
              $("#imgoption").show();
        }

    });
}):
</script>

Answer 1

为此目的使用mouseup。

 $(document).mouseup(function(e) {
  var container = $("#img");
  var con = $("#imgoption");
if (!container.is(e.target))
  container.hide();
if (con.is(e.target))
  container.parents().hide();
});

div {
  width: 100px;
  margin: auto;
  border: 3px solid;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img">
  <button id "imgoption"> click here</butoon>
</div>