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")。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

参考：.siblings()

如何将Jquery slideToggle（）应用于具有相同类的多个div？

1 个答案: