Question

我有可折叠的手风琴here，它可以正常使用静态数据。现在我已将此链接到数据库，我正在尝试从数据库中获取数据。以下是我在代码中所做的代码，

查看：

<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的索引计数，那么你可以使用它来设置第一次迭代的类。以下使用$ key =＆gt; $ 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循环中默认无法保持第一个手风琴打开

2 个答案: