Bootstrap uncollapse div按钮不适用于Rails 5答案

【问题标题】：Bootstrap uncollapse div button not working with Rails 5Bootstrap uncollapse div按钮不适用于Rails 5
【发布时间】：2018-01-17 12:17:32
【问题描述】：

我正在尝试制作按类别排序的购物清单。我希望每个类别旁边都有一个箭头，它将隐藏/取消隐藏属于该类别的所有项目。我相信我的链接指向了我想要隐藏的 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)

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

【问题讨论】：

你在哪里关闭<h3>？
你应该在<a>标签中使用data-target="#<%= category.name %>"属性
修复了 h3 标签

标签： jquery css ruby-on-rails twitter-bootstrap

【解决方案1】：

首先，您缺少结束 <h3> 标记。然后你需要告诉引导程序，它应该在点击时折叠/取消折叠哪个元素。我应该看起来像：

<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。

【讨论】：

我试过你的代码，但它仍然不会切换任何东西。尽管我没有想到这一点，但对 category.id 的想法很好。 PS：我通过 gem 安装 Bootstrap，而不是手动安装，据我所知，所有必要的 JS/JQuery 文件都存在。
您是否包含了所有必要的文件？仅仅安装 gem 是不够的。请参阅此处的说明并确保您遵循它们：github.com/twbs/bootstrap-sass#a-ruby-on-rails。仔细检查是否包含引导 js 文件（您可以使用浏览器控制台，或检查渲染页面的源代码）。还要检查你是否在控制台中没有任何 JS 错误。
等一下，您使用的是哪个版本的引导程序？我相信您在这里尝试使用它时的崩溃仅在版本 4 中。
好的，我的 application.js 中似乎缺少“//= 需要 bootstrap-sprockets”。现在切换将工作一瞬间；因为它将显示隐藏的 div 片刻，然后再次隐藏它。我不禁觉得这与每次印刷都完全重新渲染页面有关，还是应该发生这种情况？使用'bootstrap-sass'，'3.3.7'

【解决方案2】：

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

我决定在这个脚本中只使用一个 div

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

而且效果很好。

<% 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>

这有点乱，但它正是我需要的。谢谢各位。

如果其他人也有这个问题，请确保你的 application.js 文件是这样设置的：

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

【讨论】：