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

想出来了。我需要添加＆lt;％= chapter.id％＆gt;到href和其他适用的领域。

使用Bootstrap与Rails一起折叠4

4 个答案:

一般解决方案

特定解决方案