JQuery 切换下一节课答案

【问题标题】：JQuery Toggle next classJQuery 切换下一节课
【发布时间】：2016-06-15 16:34:57
【问题描述】：

我正在制作一个博客网站，希望在点击时显示标题或链接，我让它工作，所以当点击一个时它们都会打开，但我只是希望它是标题下方的那个

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

提前致谢

【问题讨论】：

标签： javascript php jquery html show-hide

【解决方案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();
    });

});

【讨论】：

这是错误的。 .slidingDiv 不是 .show_hide 的子代

【解决方案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>

【讨论】：