json三级菜单如何渲染ul

JSON三级菜单如何渲染UL：前端动态菜单实现指南

在现代Web开发中，动态菜单是提升用户体验的重要元素，JSON作为轻量级的数据交换格式，常被用于存储菜单结构，本文将详细介绍如何将三级JSON菜单数据渲染为HTML无序列表（UL）,并提供完整的实现代码。

JSON三级菜单数据结构

我们需要定义一个符合三级菜单结构的JSON数据,一个典型的三级菜单JSON结构如下：

{
  "menu": [
    {
      "id": 1,
      "name": "前端开发",
      "url": "#frontend",
      "children": [
        {
          "id": 11,
          "name": "HTML/CSS",
          "url": "#html-css",
          "children": [
            {"id": 111, "name": "基础教程", "url": "#basic"},
            {"id": 112, "name": "高级技巧", "url": "#advanced"}
          ]
        },
        {
          "id": 12,
          "name": "JavaScript",
          "url": "#javascript",
          "children": [
            {"id": 121, "name": "ES6+", "url": "#es6"},
            {"id": 122, "name": "框架", "url": "#frameworks"}
          ]
        }
      ]
    },
    {
      "id": 2,
      "name": "后端开发",
      "url": "#backend",
      "children": [
        {
          "id": 21,
          "name": "Node.js",
          "url": "#nodejs",
          "children": [
            {"id": 211, "name": "基础", "url": "#node-basic"},
            {"id": 212, "name": "Express", "url": "#express"}
          ]
        },
        {
          "id": 22,
          "name": "Python",
          "url": "#python",
          "children": [
            {"id": 221, "name": "Django", "url": "#django"},
            {"id": 222, "name": "Flask", "url": "#flask"}
          ]
        }
      ]
    }
  ]
}

递归渲染菜单的实现方法

递归是实现多级菜单渲染的经典方法，它能够优雅地处理任意层级的嵌套结构,以下是使用JavaScript递归渲染JSON三级菜单为UL的实现步骤：

基础HTML结构

我们在HTML中准备一个空的容器：

<ul id="menu-container"></ul>

JavaScript递归渲染函数

function renderMenu(menuData, container) {
  // 遍历菜单数据
  menuData.forEach(item => {
    // 创建LI元素
    const li = document.createElement('li');
    // 创建A元素（如果有URL）
    if (item.url) {
      const a = document.createElement('a');
      a.href = item.url;
      a.textContent = item.name;
      li.appendChild(a);
    } else {
      // 如果没有URL，直接显示文本
      li.textContent = item.name;
    }
    // 如果有子菜单，递归渲染
    if (item.children && item.children.length > 0) {
      const subUl = document.createElement('ul');
      renderMenu(item.children, subUl);
      li.appendChild(subUl);
    }
    // 将LI添加到容器
    container.appendChild(li);
  });
}
// 使用示例
const menuData = {
  "menu": [
    // 这里放入上面的JSON数据
  ]
};
const menuContainer = document.getElementById('menu-container');
renderMenu(menuData.menu, menuContainer);

完整实现示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">JSON三级菜单渲染示例</title>
  <style>
    ul {
      list-style: none;
      padding-left: 20px;
    }
    li {
      margin: 5px 0;
    }
    a {
      text-decoration: none;
      color: #333;
      padding: 5px 10px;
      display: block;
    }
    a:hover {
      background-color: #f0f0f0;
    }
    .submenu {
      border-left: 1px solid #ddd;
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <h1>三级菜单示例</h1>
  <ul id="menu-container"></ul>
  <script>
    // 菜单数据
    const menuData = {
      "menu": [
        {
          "id": 1,
          "name": "前端开发",
          "url": "#frontend",
          "children": [
            {
              "id": 11,
              "name": "HTML/CSS",
              "url": "#html-css",
              "children": [
                {"id": 111, "name": "基础教程", "url": "#basic"},
                {"id": 112, "name": "高级技巧", "url": "#advanced"}
              ]
            },
            {
              "id": 12,
              "name": "JavaScript",
              "url": "#javascript",
              "children": [
                {"id": 121, "name": "ES6+", "url": "#es6"},
                {"id": 122, "name": "框架", "url": "#frameworks"}
              ]
            }
          ]
        },
        {
          "id": 2,
          "name": "后端开发",
          "url": "#backend",
          "children": [
            {
              "id": 21,
              "name": "Node.js",
              "url": "#nodejs",
              "children": [
                {"id": 211, "name": "基础", "url": "#node-basic"},
                {"id": 212, "name": "Express", "url": "#express"}
              ]
            },
            {
              "id": 22,
              "name": "Python",
              "url": "#python",
              "children": [
                {"id": 221, "name": "Django", "url": "#django"},
                {"id": 222, "name": "Flask", "url": "#flask"}
              ]
            }
          ]
        }
      ]
    };
    // 递归渲染菜单函数
    function renderMenu(menuData, container) {
      menuData.forEach(item => {
        const li = document.createElement('li');
        if (item.url) {
          const a = document.createElement('a');
          a.href = item.url;
          a.textContent = item.name;
          li.appendChild(a);
        } else {
          li.textContent = item.name;
        }
        if (item.children && item.children.length > 0) {
          const subUl = document.createElement('ul');
          subUl.className = 'submenu';
          renderMenu(item.children, subUl);
          li.appendChild(subUl);
        }
        container.appendChild(li);
      });
    }
    // 初始化菜单
    const menuContainer = document.getElementById('menu-container');
    renderMenu(menuData.menu, menuContainer);
  </script>
</body>
</html>

优化与扩展

添加交互效果

可以添加JavaScript代码实现菜单的展开/折叠效果：

// 在renderMenu函数中，为有子菜单的LI添加点击事件
if (item.children && item.children.length > 0) {
  const subUl = document.createElement('ul');
  subUl.className = 'submenu';
  subUl.style.display = 'none'; // 初始隐藏
  renderMenu(item.children, subUl);
  li.appendChild(subUl);
  // 添加点击事件
  li.style.cursor = 'pointer';
  li.addEventListener('click', function(e) {
    e.preventDefault();
    if (e.target.tagName === 'A') return; // 点击链接时不触发
    subUl.style.display = subUl.style.display === 'none' ? 'block' : 'none';
  });
}

使用模板引擎

对于更复杂的项目,可以使用模板引擎如Handlebars或Mustache来简化渲染逻辑：

// Handlebars示例
const source = `
<ul>
  {{#each this}}
    <li>
      {{#if url}}
        <a href="{{url}}">{{name}}</a>
      {{else}}
        {{name}}
      {{/if}}
      {{#if children}}
        <ul>
          {{> submenu children}}
        </ul>
      {{/if}}
    </li>
  {{/each}}
</ul>
`;
const template = Handlebars.compile(source);
const html = template(menuData.menu);
document.getElementById('menu-container').innerHTML = html;

从API获取数据

在实际项目中,菜单数据通常来自API：

fetch('/api/menu')
  .then(response => response.json())
  .then(data => {
    const menuContainer = document.getElementById('menu-container');
    renderMenu(data.menu, menuContainer);
  })
  .catch(error => console.error('Error fetching menu:', error));

通过递归方法渲染JSON三级菜单为UL结构是前端开发中的常见需求,本文提供的实现方法具有以下优点：