Question

我正在尝试按类别排序购物清单。我希望每个类别旁边都有一个箭头，用于隐藏/取消隐藏属于该类别的所有项目。我相信我有链接指向我要隐藏的div，但单击链接不会影响折叠的div。

    <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到我的列表#cress按下时...

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。

Answer 2

好吧，我认为问题实际上是我每次点击下拉图标时我的标签重新呈现页面。当我使用标签时会发生同样的事情，因为我在实际发布的表单中。

我决定只使用这个脚本的div

-nonSeq

它完美无缺。

              <script>
                $(document).ready(function () {
                    $('.data-toggle').collapse();
                });
              </script>

它有点乱，但它完全符合我的需要。谢谢大家。

此外，如果其他人遇到此问题，请确保您的application.js文件设置如下：

<% provide(:title, "New List") %>
<div class="jumbotron">
    <div class="new-list">
        <h2>New List</h2>
        <%= form_for @list, url: list_path, html: {class: "form-signin"} do |f| %>
            <%= f.text_field :name, placeholder: "Name your list (optional)" %>
            <div class="categories">
                <% current_user.categories.each do |category| %>
                    <h3>
                       <%= category.name %>
                       <div class="dropdown-button" data-toggle="collapse" data-target="#<%= category.name %>">
                         <span class="glyphicon glyphicon-chevron-down"></span>
                       </div>
                     </h3>   
                     <div id="<%= category.name %>" class="collapse">
                       <% category.user_items.each do |item| %>
                         <%= item.name %>
                       <% end %>
                     </div>
                <% end %>
            </div>
        <% end %>
    </div>
</div>

<!-- dropdown button script -->
<script>
  $(document).ready(function () {
      $('.data-toggle').collapse();
  });
</script>

Bootstrap uncollapse div按钮无法使用Rails 5

2 个答案: