Bootstrap與Haml和Rails崩潰

我對rails /編程等方面很新穎，所以我很抱歉如果這是非常基本的。Bootstrap與Haml和Rails崩潰

我試圖讓twitter引導程序崩潰js在我的web應用程序上工作。我試圖按照這裏的結構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"}

但是你可以看到有兩個問題：

只有第一項崩潰。點擊任何項目鏈接只會摺疊第一個。我認爲這是因爲我需要爲每個循環中的每個項目添加一個CSS選擇器，但我無法弄清楚如何。
面板的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

來源

2013-09-05 TimK

你只指定以摺疊#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-05 15:05:40 sircapsalot

非常感謝您的及時答覆。動態ID是我一直試圖做的一整天。 – TimK

這應該有助於您的問題。如果它解決了您的問題，請接受答案！ – sircapsalot

不幸的是，它現在給我一個嵌套錯誤。我試圖玩弄水平，但我不明白爲什麼這個改變已經造成=>非法嵌套：內容不能同時在％div和嵌套在其中。再次感謝 – TimK

嗯，我只是讓它爲我工作。就我而言，我必須提出按「地區」分組的「路線」。我的代碼是：

.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-27 14:02:08 Luigolas

Bootstrap與Haml和Rails崩潰

回答

相關問題