Rails：引导手风琴没有崩溃答案

【问题标题】：Rails: Bootstrap Accordion not collapsingRails：引导手风琴没有崩溃
【发布时间】：2018-12-17 22:24:15
【问题描述】：

这是我的代码：

<div class="panel-group" id="accordion">
  <% @workspace_tasks.each do |t, a| %>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse<%= t.to_s %>">
            <%= t %>
         </a>
      </h4>
    </div>

    <div id="collapse<%= t.to_s %>" class="panel-collapse">
      <div class="panel-body">  
          <table class="table table-striped">
          </table>
      </div>
    </div>
  </div>
 <% end %>
</div>

如您所见，我将面板的 ID 设置为与我循环遍历的哈希的键一致。

信息显示正确，但是，如果我将面板默认设置为展开，则无法折叠它。反之亦然，如果我默认设置为折叠，则无法展开面板。

我在我的应用程序的其他地方使用相同的代码，但使用不同的模型在控制器中创建哈希。我觉得这种行为很奇怪。

我不确定这是否是我的代码？还是 Bootstrap 的东西？

【问题讨论】：

t 的值是多少？是否包含空格？
是的，它包含空格。这有问题吗？它都在“”之内，所以我认为空格会很好。

标签： ruby-on-rails twitter-bootstrap accordion

【解决方案1】：

The HTML5 specifcation 声明 id 不能包含空格：

当在 HTML 元素上指定时，id 属性值在元素树中的所有 ID 中必须是唯一的，并且必须包含至少一个字符。 该值不得包含任何空格字符。

您需要准备 t 变量作为有效 id，例如通过用-替换空格：

t.to_s.gsub(/\s/, '-')

或者使用parameterize:

t.to_s.parameterize

【讨论】：