如何将Jquery slideToggle（）应用于具有相同类的多个div？ [英] How to apply Jquery slideToggle() to multiple divs with same class?

问题描述

$(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_boxdiv时，两个sliding_boxdiv都会上升。我想只需要点击第一个main_boxdiv后第一个sliding_boxdiv就可以了。

When I click on "main_box" div, both the "sliding_box" divs go up. I want only the first "sliding_box" div go up after clicking on first "main_box" div.

有谁知道怎么做？

推荐答案

您必须定位 $（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（）

这篇关于如何将Jquery slideToggle（）应用于具有相同类的多个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！