2

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

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

这是我对视图代码的尝试：

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
4

2 回答 2

2

您只指定折叠#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}"}
于 2013-09-05T15:05:40.453 回答
2

好吧，我只是让它为我工作。就我而言，我必须提供按“地区”分组的“路线”。我的代码是：

  .panel-group{:id => "accordian"}
    - @route_regions.each do |region, routes|
      .panel.panel-default
        .panel-heading
          %h4.panel-title
            %a.accordion-toggle{"data-toggle" => "collapse", "data-parent" => "#accordion", :href => "##{region}"}
              = raw region
        .panel-collapse.collapse{:id => "#{region}"}
          .panel-body
            %ul#routes
              - routes.each do |route|
                %li
                  = link_to route.name, refinery.routes_route_path(route)

您的要点和先前答案的问题是您必须这样说：:href => "##{region}"在链接中。

仅供参考，我添加了如何按区域对路线进行分组，得到@route_regions变量：

@route_regions = @routes.group_by {|route| route.region}

希望这对未来的读者有所帮助，因为我遇到了这个问题。

于 2014-05-27T14:02:08.530 回答