css - 使用 Haml 和 Rails 实现 Bootstrap 崩溃

Question

我对 Rails/编程等很陌生，所以如果这是非常基础的，我深表歉意。

我正在尝试让 Twitter bootstrap collapse js 在我的网络应用程序上运行。我试着按照这里的结构http://getbootstrap.com/javascript/#collapse .

这是我对 View 代码的尝试:

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

Answer 1

您指定仅折叠 #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}"}