树形菜单 js

树形菜单（Tree Menu）是一种常见的用户界面元素，它以树状结构展示数据，允许用户展开和折叠节点以显示或隐藏子节点。树形菜单通常用于表示具有层次结构的数据，如文件系统、组织结构、分类目录等。

基础概念

节点（Node）：树形菜单的基本单元，每个节点可以有零个或多个子节点。
根节点（Root Node）：树的顶部节点，没有父节点。
子节点（Child Node）：一个节点的直接下属节点。
父节点（Parent Node）：一个节点的直接上级节点。
兄弟节点（Sibling Node）：具有相同父节点的两个节点。

类型

静态树形菜单：数据在初始化时就已经确定，不会动态变化。
动态树形菜单：数据可以根据用户操作或其他条件动态加载和更新。

应用场景

文件系统：展示文件夹和文件的层次结构。
组织结构：展示公司或团队的部门和成员关系。
分类目录：展示商品、文章等的分类信息。

示例代码

以下是一个简单的静态树形菜单的HTML和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="tree-menu">
        <div class="tree-node">
            <span class="tree-toggle">+</span> Root Node
            <div class="tree-children" style="display: none;">
                <div class="tree-node">
                    <span class="tree-toggle">+</span> Child Node 1
                    <div class="tree-children" style="display: none;">
                        <div class="tree-node">Grandchild Node 1</div>
                        <div class="tree-node">Grandchild Node 2</div>
                    </div>
                </div>
                <div class="tree-node">Child Node 2</div>
            </div>
        </div>
    </div>

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

常见问题及解决方法

节点展开/折叠状态不同步：
- 原因：可能是由于JavaScript事件处理程序未正确绑定或状态更新逻辑有误。
- 解决方法：确保每个节点的展开/折叠状态在用户交互时正确更新，并且状态在页面刷新或重新加载时保持一致（可以使用本地存储或服务器端会话来保存状态）。

性能问题：
- 原因：当树形菜单包含大量节点时，页面渲染和交互可能会变慢。
- 解决方法：
  - 使用虚拟滚动技术（如react-virtualized或vue-virtual-scroller）来只渲染可见区域内的节点。
  - 懒加载子节点数据，只在用户展开节点时加载其子节点数据。
样式问题：
- 原因：可能是由于CSS选择器冲突或样式未正确应用。
- 解决方法：检查CSS选择器和样式规则，确保它们正确应用于目标元素，并避免全局样式冲突。