Akkordeon Sidebar in der Spree taxons_tree

Question

Ich erstelle ein Acordion Sidebar Menü in Taxonomien. Alles funktioniert gut bis auf eine Sache: Wenn ich auf das erste Elternelement klicke, funktioniert es, und taxons_tree ist ausgeblendet. Aber wenn ich auf den zweiten, dritten usw. klicke, ist nur der erste taxons_tree ausgeblendet. Hier ist mein Code von _taxonomies.html.erb ist:

<% max_level = Spree::Config[:max_level_in_taxons_menu] || 1 %> 

<nav id="taxonomies" class="sidebar-item" data-hook> 
    <% @taxonomies.each do |taxonomy| %> 
    <% cache [I18n.locale, taxonomy, max_level, @taxon] do %> 
    <div class="panel-group" id="accordion"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
     <h4 class='taxonomy-root'><a data-toggle="collapse" data-parent="#accordion" href="#root_taxon"><span id="main_icon" class="glyphicon glyphicon-align-justify"> 
          </span><%= Spree.t(:shop_by_taxonomy, taxonomy: taxonomy.name) %></a></h4></div></div></div> 
     <%= taxons_tree(taxonomy.root, @taxon, max_level) %> 
    <% end %> 
    <% end %> 
</nav> 

und meine taxons_tree Methode frontend_helper.rb:

def taxons_tree(root_taxon, current_taxon, max_level = 1) 
    return '' if max_level < 1 || root_taxon.leaf? 
    content_tag :div, id:'root_taxon', class: 'list-group panel-collapse collapse in' do 
    taxons = root_taxon.children.map do |taxon| 
     link_to(seo_url(taxon), class: 'list-group-item'){content_tag(:span, " ", class: "glyphicon glyphicon-chevron-right") + taxon.name} + taxons_tree(taxon, current_taxon, max_level - 1) 
    end 
    safe_join(taxons, "\n") 
    end 

end 

Ich verstehe, dass href von _taxonomies.html.erb gleich sein muss mit meinem Inhalts-ID. Sie können sehen, ich habe versucht, Variable zu verwenden, aber es funktioniert nur für die erste. Es muss sich für jedes neue Taxon ändern, aber ich weiß nicht, wie es richtig geht. Quellcode für acoddrion Menü nehme ich von hier: http://bootsnipp.com/snippets/featured/accordion-menu vielleicht wird es dir helfen. Hier ist es sehr einfach nur #collapseOne, #collapseTwo, usw. zu implementieren.

Answer 1

Hier ist die Lösung.

taxomies.erb:

<% max_level = Spree::Config[:max_level_in_taxons_menu] || 1 %> 

    <nav id="taxonomies" class="sidebar-item" data-hook> 
    <% @taxonomies.each do |taxonomy| %> 
    <% cache [I18n.locale, taxonomy, max_level, @taxon] do %> 
    <div class="panel-group" id="accordion"> 
       <div class="panel panel-default heading" > 
         <div class="panel-heading"> 
     <h4 class='taxonomy-root'><a data-toggle="collapse" data-parent="#accordion" href="<%= '#' + taxonomy.root.id.to_s %>"><span id="main_icon" class="glyphicon glyphicon-align-justify"> 
           </span><%= Spree.t(:shop_by_taxonomy, taxonomy: taxonomy.name) %></a></h4></div></div></div> 
      <%= taxons_tree(taxonomy.root, @taxon, max_level) %> 
     <% end %> 
     <% end %> 
    </nav> 

und frontend_helper.rb:

def taxons_tree(root_taxon, current_taxon, max_level = 1) 
     return '' if max_level < 1 || root_taxon.leaf? 
      content_tag :div, id:root_taxon.root.id, class: 'list-group panel-collapse collapse in' do 
      taxons = root_taxon.children.map do |taxon| 
       link_to(seo_url(taxon), class: 'list-group-item'){content_tag(:span, " ", class: "glyphicon glyphicon-chevron-right") + taxon.name} + taxons_tree(taxon, current_taxon, max_level - 1) 
      end 
      safe_join(taxons, "\n") 
      end 

     end