Question

我只想在div之外单击时才隐藏该div。

如果您没有点击“自动”，那么在您单击“更多信息”的那一刻，它将隐藏div。因此，我想我的问题是如何在IF语句中包括兄弟姐妹（顺便说一下，里面可能有很多div，但是“更多填充”只是一个例子）。

 <div id="auto">
   <div id="more-stuff">
      HIDE ALSO WHEN YOU CLICK IN HERE!
   </div>
 </div>

 jQuery(document).click(function(e) {
     if( e.target.id != 'auto') { // Hide when click outside of layer
         jQuery("#auto").hide();
     }
 });

我希望点击兄弟元素也不会关闭div

Answer 1

您可以使用.closest()来检查事件目标是否具有ID为#auto的父对象。

演示：

$(document).click(function(e) {
    if (!$(e.target).closest("#auto").length) {
      $('#auto').hide();
    }
 });

#auto {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="auto">
   <div id="more-stuff">
      HIDE ALSO WHEN YOU CLICK IN HERE!
   </div>
 </div>

Answer 2

<div id="auto">
   Will Not Hide here
   <div id="more-stuff">
      NOT HIDE ALSO WHEN YOU CLICK IN HERE!
   </div>
</div>

<script>
   $(document).click(function(e){
     if ($(e.target).is('#auto,#more-stuff, #more-stuff *')) {
       return;
     }

     $('#auto').hide();
   });
</script>

在div和兄弟姐妹之外单击时隐藏div

2 个答案: