JavaScript 树形菜单是一种在网页中展示层次结构数据的有效方式，通常用于导航、目录或文件系统等场景。这种菜单以可折叠的节点形式呈现，用户可以通过展开或折叠节点来探索和交互。在JavaScript中实现树形菜单，可以利用DOM操作、事件处理以及递归等编程技巧。
创建树形菜单的基础是HTML结构。一个简单的树形菜单由`<ul>`和`<li>`元素构成，其中`<li>`元素代表菜单节点，而子节点则嵌套在父节点的`<ul>`中。例如：
```html
<ul id="treeMenu">
<li>节点1
<ul>
<li>子节点1.1</li>
<li>子节点1.2</li>
</ul>
</li>
<li>节点2</li>
<li>节点3</li>
</ul>
```
接下来，我们需要用JavaScript来实现菜单的动态交互。这通常涉及到以下功能：
1. **节点的展开与折叠**：通过监听点击事件，当用户点击某个节点时，根据当前节点的状态（展开或折叠）切换其子节点的可见性。可以设置一个CSS类来控制子节点的显示和隐藏。
```javascript
document.getElementById('treeMenu').addEventListener('click', function(e) {
if (e.target.tagName.toLowerCase() === 'li') {
e.target.querySelector('ul').classList.toggle('hidden');
}
});
```
在这个例子中，我们添加了一个名为`hidden`的CSS类，用于隐藏子菜单。
2. **递归渲染**：如果树形菜单的数据来源于服务器或动态生成，可以使用JavaScript的递归函数将数据转换为HTML结构。
```javascript
function renderTree(data, parent) {
var ul = document.createElement('ul');
parent.appendChild(ul);
data.forEach(function(item) {
var li = document.createElement('li');
li.textContent = item.name;
if (item.children) {
renderTree(item.children, li);
}
ul.appendChild(li);
});
}
var menuData = [
{ name: '节点1', children: [{ name: '子节点1.1' }, { name: '子节点1.2' }] },
{ name: '节点2' },
{ name: '节点3' }
];
renderTree(menuData, document.getElementById('treeMenu'));
```
3. **事件冒泡与阻止**：为了防止点击节点时同时触发了父节点的点击事件，可能需要在事件处理函数中使用`event.stopPropagation()`。
4. **动画效果**：为了提升用户体验，可以添加过渡动画，比如使用CSS3的`transition`属性或JavaScript库如jQuery的`.slideToggle()`方法。
5. **可选功能**：树形菜单还可以支持搜索、拖放排序、节点的添加和删除等功能，这些都需要额外的JavaScript逻辑来实现。
JavaScript树形菜单是通过DOM操作和事件处理来实现的。在实际项目中，可能会结合使用前端框架如React、Vue或Angular，以及第三方库如jQuery UI或jsTree，以简化开发并提供更丰富的功能。在压缩包中的"树形菜单.html"文件中，可能包含了上述概念的实际示例代码，可以参考学习。
树形菜单.rar （1个子文件） 
树形菜单.html 3KB
