Jquery 引导解压div按钮不适用于Rails 5

我正试着按类别整理一份杂货清单。我希望每个类别旁边都有一个箭头，可以隐藏/取消隐藏属于该类别的所有项目。我相信我的链接指向了我想要隐藏的div，但是单击链接不会影响折叠的div

---

不确定它是否应该呈现所有这些。我还应该提到，这一切都是以某种形式存在的，这可能是一个问题。我本来打算使用一个按钮，但按下按钮后，该按钮将发布到我的列表中#创建…

首先，您缺少关闭标签。然后您需要告诉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

。

首先，您缺少结束标记

。然后您需要告诉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

。

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

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

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

---

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

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

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

---

当您关闭

时，您应该在

标记中使用

数据目标=“#”

属性修复了关闭

时的h3标记。您应该在

标记中使用

数据目标=“#”

属性修复了h3标记。我尝试了您的代码，但它仍然不会切换任何东西。关于这一类的想法很好。虽然我没有想到。PS：我是通过gem安装Bootstrap的，不是手动安装的，据我所知，所有必要的JS/JQuery文件都存在。你包括所有必要的文件了吗？仅仅安装gem是不够的。请参阅此处的说明，并确保您遵守了这些说明：。仔细检查是否包含引导js文件（您可以使用浏览器控制台，或检查呈现页面的源代码）。还要检查控制台中是否没有任何JS错误。等等，您使用的是哪个版本的引导？我相信您在这里尝试使用的崩溃只在版本4中出现。好的，似乎我的application.js中缺少“//=需要引导链轮”。现在，切换将在一瞬间起作用；如中所示，它将短暂显示隐藏的div，然后再次隐藏它。我情不自禁地觉得，这与每家媒体都完全重新呈现页面有关，还是应该这样？使用'bootstrap sass'，'3.3.7'我尝试了你的代码，但它仍然不会切换任何东西。关于这一类的想法很好。虽然我没有想到。PS：我是通过gem安装Bootstrap的，不是手动安装的，据我所知，所有必要的JS/JQuery文件都存在。你包括所有必要的文件了吗？仅仅安装gem是不够的。请参阅此处的说明，并确保您遵守了这些说明：。仔细检查是否包含引导js文件（您可以使用浏览器控制台，或检查呈现页面的源代码）。还要检查控制台中是否没有任何JS错误。等等，您使用的是哪个版本的引导？我相信您在这里尝试使用的崩溃只在版本4中出现。好的，似乎我的application.js中缺少“//=需要引导链轮”。现在，切换将在一瞬间起作用；如中所示，它将短暂显示隐藏的div，然后再次隐藏它。我情不自禁地觉得，这与每家媒体都完全重新呈现页面有关，还是应该这样？使用“引导式sass”、“3.3.7”

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

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