无法在 foreach 循环中默认打开第一个手风琴

Posted 2023-05-09

【中文标题】无法在 foreach 循环中默认打开第一个手风琴

【英文标题】：Unable to keep first accordion open by default in foreach loop

【发布时间】：2017-08-19 17:03:36

【问题描述】：

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

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

【参考方案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>

【参考方案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>