javascript - 默认情况下，无法在 foreach 循环中保持第一个 Accordion 打开

Question

我有折叠式 Accordion here ，它可以很好地处理静态数据。现在我已经将它链接到数据库，我正在尝试从数据库中获取数据。以下是我到目前为止在 codeingiter 中完成的代码，

查看:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <?php if($student): ?>
        <?php foreach($student as $per_student): ?> 
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwo">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#<?php echo $per_student->id; ?>" aria-expanded="false" aria-controls="collapseTwo">
                            <?php echo $per_student->name; ?>
                        </a>
                    </h4>
                </div>
                <div id="<?php echo $per_student->id; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                    <div class="panel-body"> 
                        <?php echo $per_student->description; ?>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>     
    <?php endif; ?>
</div>

它正在正确获取数据，但是默认情况下所有 Accordion 都是关闭的，但我希望第一个 Accordion 默认保持打开状态，其余 Accordion 应保持关闭状态。之后用户可以根据自己的意愿打开和关闭任何 Accordion 谁能告诉我该怎么做

Answer 1

如果您有 foreach 的索引计数，那么您可以使用它来为第一次迭代设置 in 类。以下使用 $key => $per_student 将 $key 设置为索引号。

 <?php foreach($student as $key => $per_student): ?> 

然后是检查 $key == 0 是否存在的情况，如果是 - 添加导致 hte 面板打开的 in 类。

    <div id="<?php echo $per_student->id; ?>" class="panel-collapse collapse 
      <?php if($key === 0){echo "in";} ?>" role="tabpanel" aria-labelledby="headingTwo">
           <div class="panel-body"> 
             <?php echo $per_student->description; ?>
           </div> 
        </div>