JQuery切換下一課

Question

我正在創建一個博客網站，並且希望在點擊時擁有標題或鏈接顯示帖子，我已經可以正常工作，因此它們在點擊時都會打開，但我只希望它是標題下方的那個

JQuery的：

$(document).ready(function(){ 

    $('.slidingDiv').hide(); 
    $('.show_hide').show(); 

    $('.show_hide').click(function(){ 
     $('.slidingDiv').slideToggle(); 
    }); 

}); 

PHP：

for($i=0; $i<5; $i++) 
{ 
    print " 
     <a href='#' class='show_hide'>Article name</a> 
     <div class='slidingDiv'> 
      Fill this space with really interesting content. 
     </div> 
     <br> 
     <br> 
    "; 
} 

比提前KS

Answer 1

你應該尋找下一個.slidingDiv元素：

$(document).ready(function(){ 

    $('.slidingDiv').hide(); 
    $('.show_hide').show(); 

    $('.show_hide').click(function() { 
     // 'this' is now the clicked .show_hide element 
     $(this).next().slideToggle(); 
    }); 

}); 

Answer 2

您可以使用.next只選擇下一個.slidingDiv

$(this).next('.slidingDiv').slideToggle(); 

片段

$('.slidingDiv').hide(); 
 
$('.show_hide').show(); 
 

 
$('.show_hide').click(function() { 
 
    $(this).next('.slidingDiv').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#' class='show_hide'>Article name</a> 
 
<div class='slidingDiv'> 
 
    Fill this space with really interesting content. 
 
</div> 
 
<br> 
 
<br> 
 
<a href='#' class='show_hide'>Article name</a> 
 
<div class='slidingDiv'> 
 
    Fill this space with really interesting content. 
 
</div>