揭秘JSON菜单结构：如何轻松实现父菜单与子菜单的嵌套展示

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在网页设计中，JSON菜单结构被广泛应用于实现动态菜单的展示。本文将深入探讨如何使用JSON来创建并展示包含父菜单与子菜单的嵌套结构。

JSON菜单结构基础

在JSON中，菜单数据通常以键值对的形式组织。一个基本的JSON菜单结构可能如下所示：

{ "menu": [ { "title": "首页", "link": "/home" }, { "title": "关于我们", "link": "/about", "children": [ { "title": "公司简介", "link": "/about/intro" }, { "title": "团队介绍", "link": "/about/team" } ] }, { "title": "产品中心", "link": "/products" } ] }

在这个例子中，每个菜单项都有一个title（标题）和一个link（链接）。对于子菜单，我们添加了一个children数组，其中包含了嵌套的菜单项。

HTML与CSS布局

为了在网页上展示这个JSON结构，我们需要将其渲染到HTML中，并使用CSS进行样式设计。以下是一个简单的HTML示例：

<ul> <!-- 菜单项渲染代码将在这里生成 --> </ul>

接下来，我们可以使用JavaScript来遍历JSON数据，并动态生成HTML结构：

const menuData = { "menu": [ // ... JSON菜单数据 ] }; function renderMenu(menuItems) { const menu = document.querySelector('ul'); menuItems.forEach(item => { const li = document.createElement('li'); li.textContent = item.title; li.setAttribute('href', item.link); if (item.children) { const subMenu = renderMenu(item.children); li.appendChild(subMenu); } menu.appendChild(li); }); } renderMenu(menuData.menu);

CSS样式

为了使菜单看起来更美观，我们需要添加一些CSS样式。以下是一个简单的CSS样式示例：

ul { list-style-type: none; padding: 0; } ul li { padding: 8px; background-color: #f2f2f2; margin-bottom: 2px; } ul li ul { padding-left: 20px; } ul li:hover { background-color: #ddd; }