树形菜单js

树形菜单是一种常见的用户界面元素，用于展示具有层级结构的数据。在前端开发中，树形菜单通常通过JavaScript来实现动态交互。以下是关于树形菜单的基础概念、优势、类型、应用场景以及常见问题及解决方法。

基础概念

树形菜单由节点组成，每个节点可以有零个或多个子节点。根节点是树的起点，没有父节点。每个节点通常包含以下属性：

id: 节点的唯一标识符。
name: 节点的显示名称。
children: 子节点的数组（如果有）。

优势

直观展示层级关系: 树形菜单能够清晰地展示数据的层级结构。
节省空间: 相比于平铺展示，树形菜单可以更有效地利用屏幕空间。
易于导航: 用户可以通过展开和折叠节点快速找到所需信息。

类型

静态树形菜单: 数据在页面加载时就已经确定，不会动态变化。
动态树形菜单: 数据可以通过AJAX请求从服务器获取，并根据用户操作实时更新。

应用场景

文件管理系统: 展示文件夹和文件的层级结构。
组织架构图: 展示公司或部门的层级关系。
设置选项: 提供多层次的配置选项。

示例代码

以下是一个简单的静态树形菜单的JavaScript实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree Menu Example</title>
    <style>
        .tree-node {
            margin-left: 20px;
        }
        .tree-toggle {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="treeMenu">
        <div class="tree-node">
            <span class="tree-toggle">+</span> Node 1
            <div class="tree-children" style="display: none;">
                <div class="tree-node">
                    <span class="tree-toggle">+</span> Node 1.1
                </div>
                <div class="tree-node">
                    <span class="tree-toggle">+</span> Node 1.2
                </div>
            </div>
        </div>
        <div class="tree-node">
            <span class="tree-toggle">+</span> Node 2
            <div class="tree-children" style="display: none;">
                <div class="tree-node">
                    <span class="tree-toggle">+</span> Node 2.1
                </div>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('.tree-toggle').forEach(toggle => {
            toggle.addEventListener('click', function() {
                const children = this.nextElementSibling;
                if (children.style.display === 'none' || children.style.display === '') {
                    children.style.display = 'block';
                    this.textContent = '-';
                } else {
                    children.style.display = 'none';
                    this.textContent = '+';
                }
            });
        });
    </script>
</body>
</html>