在 Rails 4 中使用 Bootstrap 的 Collapse答案

【问题标题】：Using Bootstrap's Collapse with Rails 4在 Rails 4 中使用 Bootstrap 的 Collapse
【发布时间】：2016-04-19 04:29:44
【问题描述】：

我正在尝试显示带有一些示例文本的章节列表。

这是我的工作：

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

上面的 sn-p 显示了我认为的章节列表，但无法切换。

这里是 Bootstrap 的 Collapse 函数的来源：http://getbootstrap.com/javascript/#collapse

【问题讨论】：

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

【解决方案1】：

我快速查看了引导程序的导航栏代码，这是一个快速参考：

<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 轻松测试任何与引导程序相关的代码。

【讨论】：

【解决方案2】：

对于您的每个章节，您在 id 属性中都有一个额外的 #before collapse_。应该是：

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

【讨论】：

我试图删除#但它没有改变效果。
除了一些其他修改之外，您的解决方案也有所帮助。谢谢。

【解决方案3】：

通用解决方案

这是 Bootstrap 折叠功能的链接：

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

我建议您直接从他们的示例中复制并粘贴结构，并确保它在本地工作。然后，一步一步慢慢添加自己的动态erb行为，确保不要搞砸html语法。

具体解决方案

你只是错过了

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

包含整个事物的元素？

【讨论】：

想通了。我需要将添加到 href 和其他适用区域。

【解决方案4】：

想通了。我需要将添加到 href 和其他适用区域。

【讨论】：