html下拉树形菜单json

<!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>

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]);