在Bootstrap的Rails中使用崩潰4

Question

我正在嘗試顯示帶有一些示例文本的章節列表。

這是我正在使用的：

      <div class="col-md-3 col-md-4-border">
        <% @book.chapters.each do |chapter| %>
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="collapseExample" aria-expanded="true" aria-controls="collapseExample">
              <%= chapter.title %>
            </a>
          </h4>
        </div>
        <div id="collapseExample" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            testing
          </div>
        </div>
      </div>
    </div>
      <% end %>
    </div>

上面的代碼片段顯示了我視圖中的章節列表，但無法切換。

這是Bootstrap折疊功能的來源： http : //getbootstrap.com/javascript/#collapse

Answer 1

我快速查看了bootstrap的導航欄代碼，這里有個快速參考：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

您還可以使用Bootply輕松測試任何與引導程序相關的代碼。

Answer 2

對於您的每一章，在id屬性中的collapse_之前都有一個額外的# 。 它應該是：

<div id="collapse_#{chapter.id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

Answer 3

通用解決方案

這是Bootstrap折疊功能的鏈接：

http://getbootstrap.com/javascript/#collapse

我建議您直接從其示例中復制並粘貼該結構，並確保該結構在本地可用。 然后，逐步逐步添加您自己的動態erb行為，並確保您不會弄亂html語法。

具體解決方案

你只是想念

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

包含整個東西的元素？

Answer 4

想通了。 我需要將<％= chapter.id％>添加到href和其他適用區域。