Rails: Bootstrap 手风琴不折叠

Question

这是我的代码：

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

Answer 1

The HTML5 specifcation表示id不能包含空格：

When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any space characters.

您需要准备 t 变量才能成为有效的 ID，例如通过用 -:

替换空格

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

或使用 parameterize:

t.to_s.parameterize

Rails: Bootstrap 手风琴不折叠

Rails: Bootstrap Accordion not collapsing

ruby-on-rails

accordion

twitter-bootstrap