Bootstrap 与 Haml 和 Rails 一起崩溃

我对 Rails/编程等很陌生，所以如果这是非常基本的，我很抱歉。

我正在尝试让 twitter bootstrap crash js 在我的网络应用程序上工作。我试图遵循这里的结构http://getbootstrap.com/javascript/#collapse http://getbootstrap.com/javascript/#collapse.

这是我对查看代码的尝试：

http://accseportfolio.herokuapp.com/items http://accseportfolio.herokuapp.com/items

    - @items.each do |item|
      .panel-group{:id => "accordian"}
        .panel.panel-default
          .panel-heading
            %h4.panel-title
              %a.accordion-toggle{"data-toggle" => "collapse", "data-parent" => "#accordion", :href => "#collapseOne"}
                = item.code
          #collapseOne.panel-collapse.collapse.in
            .panel-body
              = item.name
        .panel.panel-default
          .panel-heading
            %h4.panel-title
              %a.accordion-toggle{"data-toggle" => "collapse", "data-parent" => "#accordion", :href => "#collapseOne"}

但是，正如您所看到的，存在两个问题：

1. 仅第一项会折叠。单击任何项​​目链接只会折叠第一个项目链接。我认为这是因为我需要为每个循环中的每个项目添加一个 CSS 选择器，但我不知道如何添加。

2. 面板的 CSS 丢失。

非常感谢您的帮助

感谢 Sircapsalot 让我走上了正确的道路，以下内容现在可以工作了

      - @items.each do |item|
        #accordion.panel-group
          .panel.panel-default
            .panel-heading
              %h4.panel-title
                %a.accordion-toggle{"data-parent" => "#accordian", "data-toggle" => "collapse", :href => "#collapse#{item.code}"}
                  Title
            .panel-collapse.collapse.in{:id => "collapse#{item.code}"}
              .panel-body
                Some example text

您仅指定折叠#collapseOne元素。因此，单击其中任何一个都会折叠第一个。

您需要插入动态 ID 才能像这样折叠。

- @items.each do |item|
      .panel-group{:id => "accordian"}
        .panel.panel-default
          .panel-heading
            %h4.panel-title
              %a.accordion-toggle{"data-toggle" => "collapse", "data-parent" => "#accordion", :href => "#collapseOne"}
                = item.code
          %div{:id => "#collapse-#{item.name}"}.panel-collapse.collapse.in
            .panel-body
              = item.name
        .panel.panel-default
          .panel-heading
            %h4.panel-title
              %a.accordion-toggle{"data-toggle" => "collapse", "data-parent" => "#accordion", :href => "#collapse-#{item.name}"}