Question

我有以下脚本：

$(document).ready(function() {
    $('.expandButton').click(function() {
         $('.expandableSection').toggle("slide");
    });
});

我想将它应用于多个部分。问题是，每次单击.expandButton按钮时，所有部分都会滑动而不是使特定部分滑动。这是有道理的，但我需要的是只有那个部分滑动。

我的部分如下所示：

<h1 class="expandButton"></h1>     
<div class="expandableSection">
</div>

<h1 class="expandButton"></h1>     
<div class="expandableSection">
</div>

<h1 class="expandButton"></h1>     
<div class="expandableSection">
</div>

Answer 1

对expandableSection元素使用基于上下文的查找。在您的情况下，目标expandableSection是所点击的expandButton元素的父级，因此您可以使用this（引用所点击的button），然后找到目标{{ 1}}使用expandableSection或.closest()（因为.parent()是按钮的直接父级）

＆＃13;

expandableSection

＆＃13;

$(document).ready(function() {
  $('.expandButton').click(function() {
    $(this).next('.expandableSection').toggle("slide");
  });
});

＆＃13;

.expandButton {
  height: 20px;
  background: lightgrey;
}
.expandableSection {
  height: 20px;
  background: lightblue;
}

＆＃13;

Answer 2

你可以试试这个：

＆＃13;

 $('.expandButton').click(function() {
         $(this).parent().toggle("slide");
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandableSection">
   <h1 class="expandButton">sdfsdf</h1>
</div>
<div class="expandableSection">
   <h1 class="expandButton">dsfsdfs</h1>
</div>
<div class="expandableSection">
   <h1 class="expandButton"> sfasdas</h1>
</div>
<div class="expandableSection">
   <h1 class="expandButton">sdfsdf</h1>
</div>

＆＃13;

使用不同的按钮滑动不同的DIV，但使用相同的ID与Javascript

2 个答案: