渲染其他partial时阻止Bootstrap Collapse自动展开

我来帮你把这段Rails视图代码整理成清晰的Markdown格式，还会给你提个实际开发中很有用的小建议哦～

主视图代码 #

你的主视图通过render方法加载多个partial，代码如下：

<div class="col-md-12">
  <%= render 'contact_phones', f: f %>
  <%= render 'contact_emails', f: f %>
  <%= render 'contact_websites', f: f %>
  <%= render 'contact_addresses', f: f %>
  <%= render 'contact_gym_contacts', f: f %>
  <%= render 'contact_notes', f: f %>
</div>

Partial示例（以contact_phones为例） #

每个partial的核心逻辑是根据参数判断是否默认折叠内容，同时提供触发折叠的链接，完整示例代码如下：

<%# 判断是否默认隐藏折叠面板 %>
<% if params[:phones].blank? %>
  <%= link_to '显示电话信息', '#contact-phones-collapse', data: { bs_toggle: 'collapse' }, class: 'btn btn-link' %>
<% end %>

<!-- Bootstrap Collapse 容器 -->
<div id="contact-phones-collapse" class="collapse <%= 'show' unless params[:phones].blank? %>">
  <%# 这里放置电话相关的表单或展示内容 %>
  <%= f.fields_for :phones do |phone_f| %>
    <div class="form-group mb-3">
      <%= phone_f.label :number, class: 'form-label' %>
      <%= phone_f.text_field :number, class: 'form-control' %>
    </div>
  <% end %>
  
  <%= link_to '添加新电话', new_contact_phone_path, class: 'btn btn-sm btn-primary' %>
</div>

实用小提示：避免Collapse ID冲突 #

因为你同时渲染了多个partial，每个partial里的Bootstrap Collapse组件必须有唯一的ID，否则点击折叠按钮时会触发多个面板同时展开/收起。

你可以结合父对象的ID来生成唯一ID，比如：

<%# 在partial里修改触发链接 %>
<%= link_to '显示电话信息', "#contact-phones-collapse-#{f.object.id}", data: { bs_toggle: 'collapse' }, class: 'btn btn-link' %>

<%# 修改Collapse容器的ID %>
<div id="contact-phones-collapse-<%= f.object.id %>" class="collapse <%= 'show' unless params[:phones].blank? %>">
  <%# 内容保持不变 %>
</div>

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