javascript 树状菜单

原创

mob64ca12e04e7a 2024-08-06 10:56:30 ©著作权

文章标签 HTML 子节点数据结构 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e04e7a的原创作品，请联系作者获取转载授权，否则将追究法律责任

创建一个JavaScript树状菜单的完整指南

在本指导中，我将教你如何构建一个简单的树状菜单。树状菜单通常用于展示层级结构的数据（如文件管理器、组织结构等）。我们将通过几个简单的步骤来完成这个任务，并在每个步骤中使用JavaScript和一些基本的HTML/CSS。

项目流程

下面是构建树状菜单的步骤概述：

步骤	说明
步骤1	设计数据结构：使用对象或数组表示树状数据
步骤2	创建HTML结构：在页面中设置树状菜单的基础HTML
步骤3	编写JavaScript代码：使用JavaScript动态生成树状菜单
步骤4	添加样式：使用CSS美化树状菜单的外观
步骤5	测试和调试：确保一切正常工作

步骤1：设计数据结构

在树状菜单中，我们首先需要定义数据结构。我们可以使用对象和数组的组合来构建这个结构。以下是一个例子：

const menuData = [
    {
        name: '根节点1',
        children: [
            {
                name: '子节点1-1',
                children: []
            },
            {
                name: '子节点1-2',
                children: [
                    { name: '子节点1-2-1', children: [] }
                ]
            }
        ]
    },
    {
        name: '根节点2',
        children: [
            {
                name: '子节点2-1',
                children: []
            }
        ]
    }
];

menuData 是一个数组，包含多个根节点。
每个节点都有 name 属性，并可选择性的包含 children 属性，它是一个数组，表示子节点。

步骤2：创建HTML结构

在HTML中，我们定义一个<ul>元素作为树状菜单的容器。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树状菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul id="tree-menu"></ul>
    <script src="script.js"></script>
</body>
</html>

#tree-menu 是我们的菜单容器，JavaScript 会向其中添加菜单项。

步骤3：编写JavaScript代码

接下来，我们将编写一个函数来动态生成菜单。

function createMenu(data, parentElement) {
    const ul = document.createElement('ul');

    data.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item.name; // 设置节点名称
        ul.appendChild(li); // 将li添加到ul中

        if (item.children && item.children.length > 0) {
            createMenu(item.children, li); // 递归调用创建子菜单
        }
    });

    parentElement.appendChild(ul); // 将生成的ul添加到父元素中
}

// 调用函数生成菜单
const treeMenu = document.getElementById('tree-menu');
createMenu(menuData, treeMenu);

createMenu 是一个递归函数，用于生成树状结构。
data 是传入的菜单数据，parentElement 是要插入子菜单的父元素。
document.createElement 用于创建新的HTML元素。

步骤4：添加样式

我们来添加一些CSS来美化菜单。

#tree-menu {
    list-style-type: none; /* 去掉默认样式 */
}

#tree-menu ul {
    margin-left: 20px; /* 缩进子菜单 */
}

#tree-menu li {
    padding: 5px 0; /* 节点之间的间距 */
    cursor: pointer; /* 鼠标悬停时指针变成手指形状 */
}

在这个样式中，我们去除了默认的列表样式，并增加了缩进和节点之间的间距。

步骤5：测试和调试

当你完成代码后，使用浏览器打开HTML文件，查看树状菜单是否按预期显示。

系统类图

使用Mermaid语法来展示树状菜单的类图：

classDiagram
    class Node {
        +String name
        +List<Node> children
    }

项目甘特图

使用Mermaid语法展示项目的甘特图：

gantt
    title 树状菜单项目
    dateFormat  YYYY-MM-DD
    section 图结构
    设计数据结构      :a1, 2023-10-01, 1d
    创建HTML结构      :a2, after a1, 1d
    编写JavaScript代码 :a3, after a2, 2d
    添加样式          :a4, after a3, 1d
    测试和调试        :a5, after a4, 1d