json实现折叠菜单特效

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在实现折叠菜单特效时，JSON可以用来存储菜单的结构和状态信息。

基础概念

JSON格式：键值对的集合，键必须是字符串，值可以是字符串、数字、对象、数组、布尔值或null。
折叠菜单：一种用户界面元素，允许用户通过点击来展开或折叠子菜单项。

类型与应用场景

静态JSON：用于定义菜单的初始结构和状态。
动态JSON：用于在运行时更新菜单状态。

应用场景包括但不限于：

网站导航：提供层次化的页面导航。
设置面板：允许用户展开/折叠不同的设置选项。
文件浏览器：展示文件夹和文件的层次结构。

示例代码

以下是一个简单的HTML和JavaScript示例，展示如何使用JSON来实现一个折叠菜单特效：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折叠菜单示例</title>
<style>
.menu-item {
    cursor: pointer;
}
.submenu {
    display: none;
}
</style>
</head>
<body>

<ul id="menu">
    <!-- 菜单将通过JavaScript动态生成 -->
</ul>

<script>
const menuData = [
    {
        name: '菜单1',
        children: [
            { name: '子菜单1-1' },
            { name: '子菜单1-2' }
        ]
    },
    {
        name: '菜单2',
        children: [
            { name: '子菜单2-1' },
            { name: '子菜单2-2', children: [{ name: '子菜单2-2-1' }] }
        ]
    }
];

function createMenu(items, parentElement) {
    items.forEach(item => {
        const li = document.createElement('li');
        li.className = 'menu-item';
        li.textContent = item.name;
        parentElement.appendChild(li);

        if (item.children) {
            const submenu = document.createElement('ul');
            submenu.className = 'submenu';
            li.appendChild(submenu);
            createMenu(item.children, submenu);
        }
    });
}

document.getElementById('menu').addEventListener('click', function(event) {
    if (event.target.classList.contains('menu-item')) {
        const submenu = event.target.querySelector('.submenu');
        if (submenu) {
            submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
        }
    }
});

createMenu(menuData, document.getElementById('menu'));
</script>

</body>
</html>