js左侧树形菜单代码

JavaScript 左侧树形菜单是一种常见的用户界面元素，用于展示层次结构的数据。以下是一个简单的树形菜单代码示例，包括展开和折叠功能。

基础概念

树形菜单是一种基于树结构的数据展示方式，每个节点可以有多个子节点，通常用于表示文件系统、组织结构或任何具有层次关系的数据。

优势

直观展示层次关系：用户可以清晰地看到数据的层级结构。
节省空间：通过折叠不常用的分支，可以有效地利用屏幕空间。
交互性强：用户可以动态展开和折叠节点，便于浏览和查找信息。

类型

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

应用场景

文件管理器：展示文件和文件夹的结构。
组织架构图：展示公司或团队的层级结构。
设置菜单：软件或应用的配置选项。

示例代码

以下是一个简单的静态树形菜单的 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>
        ul.tree-menu {
            list-style-type: none;
            padding-left: 20px;
        }
        .tree-menu li {
            cursor: pointer;
        }
        .tree-menu .node {
            display: inline-block;
            margin-right: 5px;
        }
        .tree-menu .children {
            display: none;
        }
        .tree-menu .expanded > .children {
            display: block;
        }
    </style>
</head>
<body>
    <ul class="tree-menu">
        <li>
            <span class="node">+</span> Node 1
            <ul class="children">
                <li>Subnode 1.1</li>
                <li>Subnode 1.2</li>
            </ul>
        </li>
        <li>
            <span class="node">+</span> Node 2
            <ul class="children">
                <li>Subnode 2.1</li>
                <li>Subnode 2.2</li>
            </ul>
        </li>
    </ul>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const nodes = document.querySelectorAll('.tree-menu .node');
            nodes.forEach(node => {
                node.addEventListener('click', function(event) {
                    event.stopPropagation();
                    const parentLi = this.parentElement;
                    parentLi.classList.toggle('expanded');
                    this.textContent = parentLi.classList.contains('expanded') ? '-' : '+';
                });
            });
        });
    </script>
</body>
</html>

解释

HTML 结构：
- 使用嵌套的 <ul> 和 <li> 元素来表示树形结构。
- 每个节点包含一个 <span> 元素用于显示展开/折叠符号（+ 或 -）。

CSS 样式：
- .tree-menu 类用于设置列表样式。
- .children 类默认隐藏子节点。
- .expanded 类用于展开节点时显示子节点。
JavaScript 功能：
- 监听每个节点的点击事件。
- 切换父 <li> 元素的 expanded 类，从而显示或隐藏子节点。
- 更新节点符号以反映当前状态。