使用滑動不同的按鈕，不同的DIV但用javascript

Question

相同的ID我有以下腳本：

$(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），然後使用.closest()或.parent()找到目標expandableSection（因爲expandableSection是按鈕的直接父）

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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 2

你可以試試這個：

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

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