Question

根据这个答案https://stackoverflow.com/a/11335283/2397494 我正在尝试为我的应用程序制作树状菜单

此答案仅适用于root和first children。我正在寻找改变此代码的建议，与n孩子们合作。

<ul id="menu">
  <% Hub.roots.each do |category| %>
     <li> <%= link_to h(category.title), category %>
        <% unless category.children.empty? %>
           <ul id="sub-menu"> 
             <% category.children.each do |subcategory| %>
                <li><%= link_to h(subcategory.title), subcategory %></li>
             <% end %>
           </ul>
        <% end %>
     </li>
  <% end %>
</ul>

Answer 1

  <% Hub.roots.each do |category| %>
    <div> <%= link_to h(category.title), category %>
      <% if category.children.present? %>
      <div id="submenu">
        <%= render 'hubs/sub', category: category %>
      </div>
      <% end %>
    </div>
  <% end %>

部分_sub

<ul>
  <% category.children.each do |sub| %>
    <li>
      <%= link_to_unless_current sub.title, sub %>
      <%= render 'hubs/sub', category: sub %>
    </li>
  <% end %>
</ul>

和css

#submenu > ul, ol {
  margin-right: 20px;
  li {
    font-size: 11px;
    margin: 4px 0;
    margin-bottom:-5px !important;
  }
  ul, ol {
    font-size: 11px;
    margin: 0;
    padding-left: 16px;
    margin-bottom:-5px !important;
    li {
      margin: 4px 0;
    }
  }
}

使用在轨道的祖先的树菜单

1 个答案: