jQuery Toggle下一節課

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

提前致謝

Answer 1

您可以使用.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> 

Answer 2

您應該找到下一個.slidingDiv元素：

$(document).ready(function(){

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

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

});