Question

由于我尝试使用的元素在一个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应该被隐藏并且点击cat_header_holder，显示cv_group。

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

非常感谢任何帮助。

Answer 1

假设您的最终HTML有点像下面那样，您可以查看以下代码：

＆＃13;

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

＆＃13;

.cv_group {
  display: none;
}

＆＃13;

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

＆＃13;

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

在php foreach循环中使用jquery进行简单的折叠/展开

1 个答案: