Question

我正在使用Bootstrap样式从我的办公室数据库中使用rails g scaffolding。我正在寻找使用Bootstrap的collapse.js插件来列出我们所有产品的信息。然而，当它遍历每个产品时，它不会产生新的href和id，因此每个手风琴将关闭并打开它的适当产品（它每次只使用＃collapse1）。如何让每次迭代创建新的href和id以使其正常工作（即＃collapse2，＃collapse3等）？

我希望这是有道理的。谢谢！

<% @products.each do |product| %>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
      <%= product.Name %>
    </a>
  </h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
  <div class="panel-body">
    <%= product.name %>
    <%= product.group %>
    <%= product.price %>
    <%= link_to 'Show', product %>
    <%= link_to 'Edit', edit_product_path(product) %>
    <%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %>

  </div>
</div>
</div>
</div>
<% end %>

Answer 1

尝试这样的事情：

<a data-toggle="collapse" data-parent="#accordion" href='<%= "#collapse_#{product.id}" %>'>

和

<div id='<%= "collapse_#{product.id}" %>' class="panel-collapse collapse in">

Bootstrap为每次迭代生成新的崩溃jquery？

1 个答案: