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

Question

我有可折叠手风琴 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>

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

Answer 1

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

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

然后是检查 $key 是否 == 0 的情况，如果是 - 添加导致 hte 面板打开的 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>

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

Unable to keep first accordion open by default in foreach loop

javascript

mysql

jquery

twitter-bootstrap

bootstrap-accordion