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.targetとトラバースを使用し.closest()て同じことを実現します。

以下は、無限の数のDIVを処理するため、コードを書き直す必要はありません。（追記：.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 に答える