选择性停止传播jQuery

Question

Javascript 代码：

$(".div1").click(function(event){
    event.stopPropagation();
    $(".div1 div").slideToggle();
});

$(".div2").click(function(event){
    event.stopPropagation ();
    $(".div2 div").slideToggle();
});

$(document).click(function(event){
    $(".div1 div,.div2 div").slideUp();
});

假设我点击.div1 & .div1 div 向下滑动。然后我点击.div2 但是当event.stopPropagation 被执行时，.div1 div 不会向上滑动。所以我该怎么做？我不想把这段代码$(".div1 div").slideUp(); 放在这样的 div 太多时没有意义

Answer 1

永远不要使用Event.stopPropagation()。任何应用程序的所有层都应该始终能够在任何时候记录发生的事件。

改为使用event.target 并使用.closest() 遍历来实现相同的效果。

以下将处理无限数量的 DIV，因此您无需重写代码。 （PS：只需在您的父元素中添加一个.box 以使一切更简单）

$(".box").on("click", function(event){
  const $div = $(this).find('div');
  $('.box > div').not($div).slideUp();
  $div.slideToggle();
});

$(document).on("click", function(event){
  if (!$(event.target).closest(".box").length) {
    $(".box > div:visible").slideUp();
  }
});

/*QuickReset*/ * {margin:0; box-sizing:border-box;}

.box{
  background:#eee;
  width:160px;
  padding:10px 0;
  margin:10px;
}
.box h2{
  cursor:pointer;
}
.box div{
  display:none;
  background:#aaa;
  color:#cf5;
}

Click on 'body' to close opened DIVs
  
<div class="div1 box">
  <h2>DIV 1</h2>
  <div>Lorem <br>Ipsum<br>....</div>
</div>
  
<div class="div2 box">
  <h2>DIV 2</h2>
  <div>Lorem <br>Ipsum<br>....</div>
</div>
  
<div class="div3 box">
  <h2>DIV 3</h2>
  <div>Lorem <br>Ipsum<br>....</div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>