手风琴taxons_tree中的手风琴侧边栏

时间:2016-08-23 12:46:11

标签: html ruby-on-rails twitter-bootstrap sidebar taxonomy

我正在分类法中创建一个acordion侧边栏菜单。除了一件事之外,一切都很好:当我点击第一个父元素时它会起作用,而taxons_tree则被隐藏。但是当我点击第二个,第三个等时,只隐藏第一个taxons_tree。这是我的_taxonomies.html.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">
                    <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>

和frontend_helper.rb的taxons_tree方法:

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

我知道_taxonomies.html.erb中的href必须与我的content_tag id相同。你可以看到我试过使用变量,但它只对第一个有效。它必须为每个新的分类单元改变,但我不知道它是如何做的。我从这里采取的acodrdion菜单的源代码:http://bootsnipp.com/snippets/featured/accordion-menu也许它会对你有所帮助。这里只需更改#collapseOne,#collapseTwo等即可实现。

1 个答案:

答案 0 :(得分:0)

这是解决方案。

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>

和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