javascript - 如何将 Jquery SlideToggle() 应用于具有相同类的多个 div？

Question

$(document).ready(function() {
  $(".main_box").click(function() {
    $(".sliding_box").slideToggle();
  });
});

div.wrapper {
  width: 300px;
  float: left;
  margin-right: 10px;
}
div.main_box {
  width: 300px;
  height: 30px;
  background-color: #FF0000;
}
div.sliding_box {
  width: 300px;
  height: 300px;
  background-color: #0000FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="main_box"></div>
  <div class="sliding_box"></div>
</div>
<div class="wrapper">
  <div class="main_box"></div>
  <div class="sliding_box"></div>
</div>

当我单击“main_box”div 时，两个“sliding_box”div 都会上升。我只想在点击第一个“main_box”div 后第一个“sliding_box”div 上升。

有人知道怎么做吗？

Answer 1

您必须定位 $(this).siblings('.sliding_box') 而不是 $(".sliding_box")。

$(document).ready(function() {
  $(".main_box").click(function() {
    $(this).siblings('.sliding_box').slideToggle();
  });
});

div.wrapper {
  width: 300px;
  float: left;
  margin-right: 10px;
}
div.main_box {
  width: 300px;
  height: 30px;
  background-color: #FF0000;
}
div.sliding_box {
  width: 300px;
  height: 300px;
  background-color: #0000FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="main_box"></div>
  <div class="sliding_box"></div>
</div>
<div class="wrapper">
  <div class="main_box"></div>
  <div class="sliding_box"></div>
</div>

引用:.siblings()