jquery - 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>