2

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 太多时没有意义

4

1 回答 1

2

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

而是使用event.targetand traverse with.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>

于 2012-07-19T20:59:09.003 回答