Bootstrap Accordion循环渲染后折叠展开功能失效求助

嘿，我一眼就揪出问题啦！你当前的代码里有几个关键错误，直接导致折叠功能没法正常工作：

• 所有折叠面板的id全是collapseOne，每个标题链接的href也都指向同一个ID，Bootstrap根本没法区分不同的折叠项
• 所有面板都加了in类，这会让所有内容默认全展开，完全违背了手风琴组件的交互逻辑

下面是修正后的完整代码，我给你标好了关键修改点：

<div class="bs-example"> 
  <div class="panel-group" id="accordion"> 
    @foreach($faqs as $faq) 
    <div class="panel panel-default"> 
      <div class="panel-heading"> 
        <h4 class="panel-title"> 
          <!-- 修改：href指向当前FAQ对应的唯一ID，确保点击能定位到正确面板 -->
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $faq->id }}">
            {{ $faq->title }}
          </a> 
        </h4> 
      </div> 
      <!-- 修改：生成唯一ID，仅第一个面板默认展开（用$loop->first判断） -->
      <div id="collapse{{ $faq->id }}" class="panel-collapse collapse {{ $loop->first ? 'in' : '' }}"> 
        <div class="panel-body"> 
          <p>{{ $faq->description }}</p> 
        </div> 
      </div> 
    </div> 
    @endforeach 
  </div>
</div>

核心修改说明： #

1. 唯一ID生成：用$faq->id（或者循环索引$loop->index）给每个折叠面板生成独一无二的id，比如collapse1、collapse2，确保每个面板都能被精准定位
2. 同步触发链接：把标题链接的href改成对应面板的唯一ID，这样点击标题时，Bootstrap才能找到正确的折叠目标
3. 默认展开控制：通过$loop->first判断，只让第一个FAQ面板默认展开，其他保持折叠状态，符合手风琴组件的常规交互逻辑

改完之后，你的Bootstrap手风琴组件就能正常实现折叠展开的功能啦！

内容的提问来源于stack exchange，提问作者Elliot