与Haml和Rails的Bootstrap崩溃 [英] Bootstrap Collapse with Haml and Rails

问题描述

我很新的rails /程序等，所以我道歉，如果这是非常基本的。

我想尝试在我的网络应用程序上使用twitter bootstrap collapse js。我已尝试按照此处的结构 http://getbootstrap.com/javascript/#collapse 。 / p>

这是我尝试使用视图代码：

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}} 
标题
 .panel-collapse.collapse.in {：id => collapse＃{item.code}} 
 .panel-body 
一些示例文本
  

解决方案

好吧，我只是让它为我工作。在我的情况下，我必须呈现按地区分组的路线。我的代码是：

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

FYI，我添加了如何按地区对航线进行分组，得到 @route_regions 变量：

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

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

I'm quite new to rails / programing etc so I apologise if this is very basic.

I'm trying to get the twitter bootstrap collapse js working on my web app. I have tried to follow the structure here http://getbootstrap.com/javascript/#collapse.

Here is my attempt with view code:

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

However as you can see there are two issues:

1. Only the first item collapses. Clicking on any of the item links will only collapse the first. I think this is because I need to add a CSS selector for each item in the each loop but I can't figure out how.

2. The CSS for the panels is missing.

Many thanks for your help

Thanks to sircapsalot for putting me on the right track the following now works

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

解决方案

Well, I just have made it work for me. In my case, I have to present "routes" grouped by "regions". My code is:

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

The problem of your gists and previous answer was that you have to put it like this: :href => "##{region}"in the link.

FYI, I add how I grouped the routes by regions, getting the @route_regions variable:

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

Hopes this help for future readers as I had this problem.

这篇关于与Haml和Rails的Bootstrap崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！