html树形菜单模板Web前端树形级联菜单怎么实现

1、理解树形数据构造

树形构造是一种非线性数据构造，由节点和边组成。
每个节点可以有多个子节点，而根节点没有父节点。
在实现树形级联菜单之前，我们须要理解树的基本观点。

2、搭建根本HTML构造

我们从创建一个根本的HTML文件开始，命名为index.html，并添加必要的样式和脚本引用。
在HTML的 <body> 标签内，我们添加一个空缺的 <ul> 元素，这将作为树形菜单的容器。

HTML

（图片来自网络侵删）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tree Menu</title> <link rel="stylesheet" href="styles.css"> <script src="main.js"></script></head><body> <ul id="tree-menu"></ul></body></html>

3、数据准备与加载

为了仿照树形数据，我们可以定义一个包含层次构造的JSON工具。
这里以一个网络设备目录作为示例，数据构造如下所示：

JavaScript

const data = [ { label: 'Device 1', children: [ { label: 'Subdevice 1-1', children: [] }, { label: 'Subdevice 1-2', children: [ { label: 'Subdevice 1-2-1', children: [] } ] } ] }, { label: 'Device 2', children: [] }];

4、递归天生树形菜单

我们通过document.getElementById("tree-menu")获取树形菜单的容器，然后递归遍历数据工具，将每个节点天生为菜单项，并添加到容器中。
`

JavaScript

function buildTree(menuContainer, data) { data.forEach(item => { const li = document.createElement('li'); li.innerText = item.label; if (item.children.length > 0) { const ul = document.createElement('ul'); buildTree(ul, item.children); li.appendChild(ul); } menuContainer.appendChild(li); });}const treeMenu = document.getElementById('tree-menu');buildTree(treeMenu, data);

5、实现菜单展开与折叠

通过添加自定义的CSS样式和JavaScript事宜处理，我们可以实现树形菜单的展开与折叠功能。
用户点击菜单项时，相应的子菜单将显示或隐蔽。

CSS

#tree-menu ul { display: none;}#tree-menu li.collapsed > ul { display: block;}

以上代码将初始状态下的子菜单隐蔽，当菜单项的父级li元素带有collapsed类名时，显示对应的子菜单。
JavaScript
document.querySelectorAll('#tree-menu li').forEach(li => { const subMenu = li.querySelector('ul'); if (subMenu) { li.addEventListener('click', () => { li.classList.toggle('collapsed'); }); }});
通过以上代码，当用户点击带有子菜单项的菜单项时，通过添加或移除collapsed类名，实现子菜单的显示或隐蔽。
6、菜单选择与数据交互
在树形级联菜单中，我们常常须要获取用户所选的值，并将其用于后续的数据交互。
为了实现这一功能，我们可以为每个菜单项添加一个点击事宜处理函数，并将所选的值存储在全局变量中。
首先，在JavaScript代码中，声明一个全局变量selectedValue用于存储用户所选的值：
JavaScript
let selectedValue = '';document.querySelectorAll('#tree-menu li').forEach(li => { li.addEventListener('click', (e) => { selectedValue = li.innerText; // 阻挡事宜冒泡 e.stopPropagation(); });});
然后，当用户点击任意菜单项时，相应的点击事宜将触发，将该菜单项的文本内容赋值给selectedValue变量。
在后续的数据交互过程中，我们可以利用selectedValue变量来获取用户所选的值，并进行相应的处理。
希望本文能够对您有所帮助，感谢您的阅读！
人人为我，我为大家，感激您的浏览，我们一起加油吧。