jquery - Bootstrap uncollapse div 按钮不适用于 Rails 5

Question

我正在尝试制作一个按类别排序的购物 list 。我想要每个类别旁边的箭头，它将隐藏/取消隐藏属于该类别的所有元素。我相信我有指向我想隐藏的 div 的链接，但单击链接不会影响折叠的 div。

https://pastebin.com/JmjkpzE0

    <div class="categories">
        <% current_user.categories.each do |category| %>
            <h3>
                <%= category.name %>
                <a href="#<%= category.name %>" data-toggle="collapse">
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </a>
</h3>
            <br>
            <div id="<%= category.name %>" class="collapse">
                <% category.user_items.each do |item| %>
                    <%= item.name %>
                <% end %>
            </div>
        <% end %>
    </div>

这是我的终端在我点击应该切换我的 div 的链接时显示的内容

  Rendered lists/new.html.erb within layouts/application (22.3ms)
  Rendered layouts/_rails_default.html.erb (42.0ms)
  Rendered layouts/_shim.html.erb (0.4ms)
  Rendered layouts/_header.html.erb (0.6ms)
  Rendered layouts/_footer.html.erb (0.3ms)
Completed 200 OK in 78ms (Views: 68.9ms | ActiveRecord: 8.7ms)

不确定它是否应该渲染所有这些。我还应该提到，这都是一种形式，这可能是一个问题。我原本打算使用一个按钮，但按钮会 POST 到我的列表#create 按下时...

Answer 1

首先，您漏掉了结尾 <h3>标签。然后你需要告诉 Bootstrap ，它应该在点击时折叠/展开哪个元素。我应该看起来像:

<h3>
   <%= category.name %>
   <a href="#<%= category.name %>" data-toggle="collapse" data-target="#<%= category.name %>">
     <span class="glyphicon glyphicon-chevron-down"></span>
   </a>
 </h3>   
 <div id="<%= category.name %>" class="collapse">
   <% category.user_items.each do |item| %>
     <%= item.name %>
   <% end %>
 </div>

编辑:您还确定类别名称是 id 的最佳选择吗？如果名称不唯一会发生什么？尝试使用 category.id相反。