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 类，从而显示或隐藏子节点。
- 更新节点符号以反映当前状态。

遇到的问题及解决方法

问题：点击节点时没有展开或折叠。原因：可能是事件监听器没有正确绑定，或者 CSS 样式没有正确应用。 解决方法：

确保 JavaScript 代码在 DOM 完全加载后执行（使用 DOMContentLoaded 事件）。
检查 CSS 类名是否正确，并确保样式表正确加载。
使用浏览器的开发者工具检查元素，确认事件监听器是否正确绑定。

通过以上步骤，可以创建一个基本的树形菜单，并解决常见的展开/折叠问题。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js左侧树形菜单代码

基础概念

优势

类型

应用场景

示例代码

解释

遇到的问题及解决方法

相关·内容

webgl树形菜单选择器

day05【后台】菜单维护/16-尚硅谷-尚筹网-菜单维护-页面显示树形结构-前端-把生成树形结构的代码封装到函数

day05【后台】菜单维护/11-尚硅谷-尚筹网-菜单维护-页面显示树形结构-前端-显示图标-代码实现

33.给左侧菜单数据传递.avi

34.左侧菜单数据绑定&状态处理.avi

17.用Fragment替换左侧菜单和主页面内容.avi

31_尚硅谷_React全栈项目_通过左侧菜单跳转路由

36.从左侧菜单切换对应的详情页面.avi

day05【后台】菜单维护/01-尚硅谷-尚筹网-菜单维护-树形结构基础知识-上

day05【后台】菜单维护/02-尚硅谷-尚筹网-菜单维护-树形结构基础知识-下

低代码.菜单体系

day05【后台】菜单维护/03-尚硅谷-尚筹网-菜单维护-页面显示树形结构-后端-逆向工程

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐