Bootstrap Collapse with Haml and Rails

Я новичок в рельсах/программировании и т. Д., Поэтому прошу прощения, если это очень просто.Bootstrap Collapse with Haml and 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"}

Однако, как вы можете видеть, что есть два вопроса:

Только первый элемент разрушается. Нажатие на любой из ссылок на объекты будет только свернуть первый. Я думаю, это потому, что мне нужно добавить селектор 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 элемент. Поэтому нажатие любой из них приведет к краху первого.

Для этого необходимо вставить динамические идентификаторы.

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

Большое спасибо за ваш быстрый ответ. динамический идентификатор - это то, что я пытался делать весь день. – 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}" в ссылке.

FYI, я добавляю, как я сгруппировал маршруты по регионам, получить переменную @route_regions:

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

Hopes это помощь для будущих читателей, как я имел эту проблему.

источник

2014-05-27 14:02:08 Luigolas

Bootstrap Collapse with Haml and Rails

ответ

Смежные вопросы