默认情况下，无法在 foreach 循环中保持第一个手风琴处于打开状态

Question

我这里有可折叠的手风琴，它对静态数据工作正常。现在我已将其链接到数据库，并且正在尝试从数据库中获取数据。以下是我到目前为止在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>

它正在正确获取数据， 但是默认情况下所有手风琴都关闭了，但我希望第一个手风琴默认保持打开状态，其余手风琴应该保持关闭.之后，用户可以根据自己的意愿打开和关闭任何手稿任何人都可以告诉我如何做到这一点

Answer 1

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

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

然后是检查$key == 0 的情况，如果是，则添加导致面板打开的 in clas。

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

Answer 2

可以通过下面的代码使用 jQuery 实现。

$(".panel-collapse").each(function(index, element) {
  $(element).addClass(index == 0 ? "in" : "");
});

在行动中：

$(document).ready(function() {
  $(".panel-collapse").each(function(index, element) {
    $(element).addClass(index == 0 ? "in" : "");
  });
  $('a[role="button"]:first').removeClass('collapsed'); //This will fix the icon to show 'V' (open status);
});

#accordion .panel-heading {
  padding: 0;
}
#accordion .panel-title>a {
  display: block;
  padding: 0.4em 0.6em;
  outline: none;
  font-weight: bold;
  text-decoration: none;
}
#accordion .panel-title>a.accordion-toggle::before,
#accordion a[data-toggle="collapse"]::before {
  content: "e113";
  float: left;
  font-family: 'Glyphicons Halflings';
  margin-right: 1em;
}
#accordion .panel-title>a.accordion-toggle.collapsed::before,
#accordion a.collapsed[data-toggle="collapse"]::before {
  content: "e114";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="phttps://jsfiddle.net/learner001/63563ou5/#forkanel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <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="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                      Collapsible Group Item #2
                    </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                      Collapsible Group Item #3
                    </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>