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设置为与我要遍历的哈希的键一致。

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

我在我的应用程序中的其他地方使用了相同的代码，但是使用了不同的Model在Controller中创建哈希。我觉得这种行为很奇怪。

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

Answer 1

:help using-<Plug>指出id不能包含空格：

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

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

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

或使用The HTML5 specifcation：

t.to_s.parameterize

Rails：Bootstrap手风琴没有崩溃

1 个答案: