如何优化三级关联Mega Menu组件的JSON结构（Handlebars）

优化核心思路 #

把L1、L2、L3按实际层级嵌套存储，让数据结构和组件的UI层级完全对应，这样Handlebars就能通过嵌套循环轻松实现三级菜单的关联渲染。

优化后的JSON结构示例 #

{
  "megaMenu": [
    {
      "l1Label": "分类1",
      "l2Items": [
        {
          "l2Label": "子分类1-1",
          "l3Items": [
            {
              "title": "商品1-1-1",
              "imgUrl": "/path/to/img1.jpg"
            },
            {
              "title": "商品1-1-2",
              "imgUrl": "/path/to/img2.jpg"
            }
          ]
        },
        {
          "l2Label": "子分类1-2",
          "l3Items": [
            {
              "title": "商品1-2-1",
              "imgUrl": "/path/to/img3.jpg"
            }
          ]
        }
      ]
    },
    {
      "l1Label": "分类2",
      "l2Items": [
        {
          "l2Label": "子分类2-1",
          "l3Items": [
            {
              "title": "商品2-1-1",
              "imgUrl": "/path/to/img4.jpg"
            }
          ]
        }
      ]
    }
  ]
}

对应的Handlebars模板代码 #

<nav class="mega-menu-nav">
  {{#each megaMenu}}
    <div class="l1-item">
      <span class="l1-label">{{l1Label}}</span>
      <div class="mega-menu-panel">
        <div class="l2-column">
          {{#each l2Items}}
            <div class="l2-item">
              <span class="l2-label">{{l2Label}}</span>
              <div class="l3-grid">
                {{#each l3Items}}
                  <figure class="l3-item">
                    <img src="{{imgUrl}}" alt="{{title}}">
                    <figcaption>{{title}}</figcaption>
                  </figure>
                {{/each}}
              </div>
            </div>
          {{/each}}
        </div>
      </div>
    </div>
  {{/each}}
</nav>

关键说明 #

• 层级关联：L1对象直接包含对应的L2数组，每个L2对象再包含对应的L3数组，完全匹配组件的三级结构
• 字段适配：L3字段直接包含title和imgUrl，刚好对应figure元素的标题和图片需求
• 渲染逻辑：Handlebars通过三层{{#each}}嵌套循环，直接从L1遍历到L3，无需额外的关联判断

hover展开菜单的交互可以通过CSS的:hover伪类实现（比如控制.mega-menu-panel的显示隐藏），如果需要更复杂的交互再配合少量JS即可。

内容的提问来源于stack exchange，提问作者cts