js树形菜单全部展开

基础概念

树形菜单是一种常见的用户界面元素，用于展示层次结构的数据。每个节点可以有零个或多个子节点，通常通过缩进来表示层次关系。展开和折叠功能允许用户查看或隐藏子节点。

类型

静态树形菜单：数据固定，不可动态添加或删除节点。
动态树形菜单：数据可动态更新，支持节点的增删改查。

应用场景

文件管理系统：展示文件夹和文件的层次结构。
组织架构图：显示公司或团队的层级关系。
设置选项：多层次的系统配置选项。

实现全部展开的方法

以下是一个使用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</title>
    <style>
        .tree-node {
            margin-left: 20px;
        }
        .tree-toggle {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="tree">
        <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 class="tree-children" style="display: none;">
                        <div class="tree-node">Node 1.1.1</div>
                        <div class="tree-node">Node 1.1.2</div>
                    </div>
                </div>
                <div class="tree-node">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">Node 2.1</div>
            </div>
        </div>
    </div>

    <button onclick="expandAll()">Expand All</button>

    <script>
        function toggleNode(node) {
            const children = node.querySelector('.tree-children');
            if (children) {
                children.style.display = children.style.display === 'none' ? 'block' : 'none';
                node.querySelector('.tree-toggle').textContent = children.style.display === 'none' ? '+' : '-';
            }
        }

        function expandAll() {
            const nodes = document.querySelectorAll('.tree-node');
            nodes.forEach(node => {
                toggleNode(node);
                const childrenNodes = node.querySelectorAll('.tree-node');
                childrenNodes.forEach(childNode => toggleNode(childNode));
            });
        }

        document.querySelectorAll('.tree-toggle').forEach(toggle => {
            toggle.addEventListener('click', () => toggleNode(toggle.parentElement));
        });
    </script>
</body>
</html>

解释

HTML结构：每个节点包含一个tree-toggle用于展开/折叠，以及一个tree-children用于存放子节点。
CSS样式：简单的样式用于缩进和指示器。
JavaScript功能：
- toggleNode函数用于切换单个节点的展开/折叠状态。
- expandAll函数递归地调用toggleNode来展开所有节点。
- 事件监听器绑定到每个tree-toggle，允许用户手动展开/折叠节点。