html下拉树形菜单json

HTML下拉树形菜单通常使用JavaScript和CSS来实现，其中JSON数据用于存储树形结构的信息。以下是一个基础概念、优势、类型、应用场景以及示例代码的完整答案。

基础概念

树形菜单是一种用户界面元素，允许用户通过点击或选择来展开和折叠子菜单项。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

优势

可读性强：JSON格式直观，易于理解和维护。
灵活性高：可以轻松地表示复杂的层次结构。
跨平台兼容：几乎所有的编程语言都有解析JSON的能力。
易于扩展：可以方便地添加新的节点或属性。

类型

静态树形菜单：数据在页面加载时就已经确定。
动态树形菜单：数据通过AJAX请求从服务器动态加载。

应用场景

网站导航：帮助用户快速找到所需信息。
文件管理系统：展示文件夹和文件的层次结构。
权限管理：显示不同用户角色的权限层级。

示例代码

以下是一个简单的HTML下拉树形菜单的示例，使用JSON数据和JavaScript来动态生成菜单。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tree Menu Example</title>
    <style>
        ul.tree {
            list-style-type: none;
            padding-left: 20px;
        }
        li {
            cursor: pointer;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="tree-container"></div>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

const treeData = {
    "name": "Root",
    "children": [
        {
            "name": "Folder 1",
            "children": [
                {"name": "File 1.1"},
                {"name": "File 1.2"}
            ]
        },
        {
            "name": "Folder 2",
            "children": [
                {"name": "File 2.1"},
                {
                    "name": "Subfolder 2.2",
                    "children": [
                        {"name": "File 2.2.1"}
                    ]
                }
            ]
        }
    ]
};

function createTree(container, data) {
    const ul = document.createElement('ul');
    ul.classList.add('tree');

    data.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item.name;

        if (item.children) {
            li.addEventListener('click', (e) => {
                e.stopPropagation();
                const childUl = li.querySelector('ul');
                if (childUl) {
                    childUl.classList.toggle('hidden');
                } else {
                    createTree(li, item.children);
                }
            });
        }

        ul.appendChild(li);
    });

    container.appendChild(ul);
}

const container = document.getElementById('tree-container');
createTree(container, [treeData]);