Question

我正在尝试制作一个类似于this的小手风琴页面，但是我无法获得它，以使其他面板在打开时关闭。

<div class="panel-group" id="accordion">
       @foreach($questions as $_question)
               <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                         <a data-toggle="collapse" data-parent="#accordion" href="#collapse-{{ $_question['sort']}}">{{ $_question['question'] }}</a>
                      </h4>
                   </div>
                 <div id="collapse-{{ $_question['sort']}}" class="panel-collapse collapse in">
                   <div class="panel-body">
                      <p>{!!$_question['answer'] !!}</p>
                   </div>
                 </div>
               </div>
        @endforeach
</div>

Answer 1

您的id和您的panel-heading中的aria-labelledby=中缺少panel-body。

尝试以下代码：

<div class="panel-group" id="accordion">
       @foreach($questions as $_question)
               <div class="panel panel-default">
                  <div class="panel-heading" id="heading-{{ $_question['sort'] }}">
                      <h4 class="panel-title">
                         <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse-{{ $_question['sort']}}" aria-expanded="true" aria-controls="collapse-{{ $_question['sort']}}">
                          {{ $_question['question'] }}
                         </a>
                      </h4>
                   </div>

                   <div id="collapse-{{ $_question['sort']}}" class="panel-collapse collapse in" aria-labelledby="heading-{{ $_question['sort'] }}" data-parent="#accordion">
                     <div class="panel-body">
                        <p>{!!$_question['answer'] !!}</p>
                     </div>
                   </div>
               </div>
        @endforeach
</div>

foreach手风琴不关闭其他面板

1 个答案: