在php foreach循环中使用jquery进行简单的折叠/展开 - Simple collapse / expand using jquery within a php foreach loop

Simple collapse / expand using jquery within a php foreach loop

对于简单的折叠/展开有一点麻烦，因为我尝试这样做的元素在foreach循环中，并且我创建的任何元素都是为每个列表项创建的，因此，给它一个容器证明是困难的。

PHP:

echo '<div class="cat_holder">';
function listFolderFiles($dir){
    $ffs = scandir($dir);

    foreach($ffs as $ff){
        if($ff != '.' && $ff != '..'){
            if(is_dir($dir.'/'.$ff)){
echo '<div data-toggle="collapse" class="cat_header_holder collapse in">';
echo '<h1 class="lead">' .$ff. '</h1>';
echo '</div>';
            listFolderFiles($dir.'/'.$ff);    
            }else{

?><div class="cv_group"><?php
 echo '<a target="_blank" class="cv_item" href="'.$dir.'/'.$ff.'">'.$ff.'<span class="pull-right add_shortlist"><i class="fa fa-check" aria-hidden="true"></i></span></a>';

?></div><?php
   }    
  }
 }
}
listFolderFiles('pdf');
 echo '</div>';
?>

JS:

   $('.cat_header_holder').click(function(){
    $('.cv_group').slideToggle('slow');
});

生成的HTML:

<div data-toggle="collapse" class="cat_header_holder collapse in"><h1 class="lead">Title</h1>
</div>
<div class="cv_group">
<a target="_blank" class="cv_item" href="#doc">click here</a>
</div>
<div class="cv_group">
<a target="_blank" class="cv_item" href="#doc">click here</a>
</div>

cv_group应该是隐藏的和onclick cat_header_holder，显示cv_group。

问题是，当点击cat_header_holder所有cv_group的显示，而不是一个为该类别。

任何帮助都是非常感激的。

假设您的最终HTML将与下面类似，您可以检查以下代码:

$(document).ready(function() {
  $('.cat_header_holder').click(function() {
    $(this).nextUntil('.cat_header_holder').slideToggle('slow');
  });
});

.cv_group {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div data-toggle="collapse" class="cat_header_holder collapse in">
  <h1 class="lead">Some Text 1</h1>
</div>
<div class="cv_group">
  Some Contents 1 - 1
</div>
<div class="cv_group">
  Some Contents 1 - 2
</div>
<div data-toggle="collapse" class="cat_header_holder collapse in">
  <h1 class="lead">Some Text 2</h1>
</div>
<div class="cv_group">
  Some Contents 2 - 1
</div>
<div class="cv_group">
  Some Contents 2 - 2
</div>
<div class="cv_group">
  Some Contents 2 - 3
</div>
<div data-toggle="collapse" class="cat_header_holder collapse in">
  <h1 class="lead">Some Text 3</h1>
</div>
<div class="cv_group">
  Some Contents 3
</div>

这里通过$.nextUntil()，我们的目标是下一个DOM元素，即需要切换的相关div。