Bootstrap Collapse组件问题：仅首个面板可切换，如何实现独立控制？

嘿，这个问题我太熟啦！你遇到的核心问题是所有折叠触发器都绑定到了同一个ID的元素上——Bootstrap的collapse插件是通过ID来定位目标面板的，所以不管你点哪个链接，它只会找到第一个匹配id="demo"的面板，自然所有操作都只作用在第一个上面啦。

要让每个折叠面板独立可控，关键是给每个面板生成唯一的ID，然后让对应的触发链接指向这个专属ID就行。下面是修改后的完整代码：

<% @comments.each do |z| %>
  <% if z.post_id == post.id %>
    <a href="#demo-<%= z.id %>" data-toggle="collapse">Comments for <%= z.name %></a>
    <div id="demo-<%= z.id %>" class="collapse">
      <%= z.name %> Commented: <%= z.body %>
    </div>
  <% end %>
<% end %>

关键修改点： #

• 把原来固定的id="demo"改成动态生成的id="demo-<%= z.id %>"，利用每个评论的id属性保证ID唯一（如果评论没有id，也可以用each_with_index的索引值，比如demo-<%= index %>）。
• 触发链接的href同步改成#demo-<%= z.id %>，Bootstrap会自动解析href里的锚点，无需额外配置data-target就能精准对应到专属面板。

这样修改后，每个触发链接都会精准对应自己的折叠面板，点击不同的链接就只会展开/收起对应的那一个面板啦！

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