Bootstrap / Rails-手風琴內部的字符串插值

Question

我一直在努力在HTML手風琴中進行字符串插值。 我似乎無法弄清楚這是一個邏輯問題（對Rails來說是相當新的）。 我的問題是，雖然布局很好，但是當我單擊以折疊3個可折疊面板中的任何一個時，它們全部都折疊了。 （因為我只有1＃崩潰）。

最外層的ERB

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-sm-3">
                <h2>Categorias</h2>
                <div class="panel-group" id="accordion">
                    <%= render partial: "categories/catalog", collection: @categories, as: :c %>
            </div>
        </div>

_catalog部分

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                <%= c.name %>
                <span class="badge">4</span>
            </a>
        </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
        <% c.subcategories.each do |sc| %>
            <div class="panel-body">
                <a href="#">
                    <%= sc.name %>
                </a>
            </div>
        <% end %>
    </div>
</div>

控制者

  def catalogo
    @categories = Category.where("parent_id IS NULL")
    unless params[:cat_id].blank?
      @products = Product.where(category_id: params[:cat_id]).paginate(:page => params[:page], :per_page => 50)
    else
      @products = Product.all.paginate(:page => params[:page], :per_page => 50)
    end
      @categorieswparent = Category.where("parent_id IS NOT NULL")
  end

Answer 1

您的ID必須是唯一的。 代替硬編碼id="collapse1" ，使用記錄的ID：

id="collapse<%= sc.id %>"

對負責折疊和展開手風琴的<a>標簽的href進行相同的插值。

Answer 2

使用類別id id="#collapse<%= c.id %>"在_catalog Partial中插入元素ID。

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse<%= c.id %>">
                <%= c.name %>
                <span class="badge">4</span>
            </a>
        </h4>
    </div>
    <div id="collapse<%= c.id %>" class="panel-collapse collapse in">
        <% c.subcategories.each do |sc| %>
            <div class="panel-body">
                <a href="#">
                    <%= sc.name %>
                </a>
            </div>
        <% end %>
    </div>
</div>