js实现树形菜单
实现树形菜单的基本思路
使用JavaScript实现树形菜单通常需要结合HTML和CSS。树形菜单的核心是递归结构，每个菜单项可能包含子菜单，通过DOM操作动态展示或隐藏子项。
HTML结构设计
基础的树形菜单HTML结构通常使用嵌套的无序列表（<ul>和<li>）表示层级关系：
<ul class="tree">
<li>
<span class="toggle">父节点1</span>
<ul>
<li>子节点1</li>
<li>子节点2</li>
</ul>
</li>
<li>
<span class="toggle">父节点2</span>
<ul>
<li>子节点3</li>
<li>
<span class="toggle">子节点4</span>
<ul>
<li>孙节点1</li>
</ul>
</li>
</ul>
</li>
</ul>CSS样式设置
为树形菜单添加基础样式和交互效果：
.tree ul {
list-style: none;
padding-left: 20px;
display: none;
}
.tree li {
margin: 5px 0;
}
.tree .toggle {
cursor: pointer;
}
.tree .toggle::before {
content: "+ ";
}
.tree .active::before {
content: "- ";
}
.tree .active + ul {
display: block;
}JavaScript交互逻辑
通过事件委托实现点击展开/折叠功能：
document.querySelector('.tree').addEventListener('click', function(e) {
if (e.target.classList.contains('toggle')) {
e.target.classList.toggle('active');
}
});动态生成树形菜单
如果需要从数据动态生成树形结构，可以使用递归函数：
function buildTree(data, parentElement) {
const ul = document.createElement('ul');
data.forEach(item => {
const li = document.createElement('li');
if (item.children) {
const span = document.createElement('span');
span.className = 'toggle';
span.textContent = item.name;
li.appendChild(span);
buildTree(item.children, li);
} else {
li.textContent = item.name;
}
ul.appendChild(li);
});
parentElement.appendChild(ul);
}
// 示例数据
const treeData = [
{
name: '父节点1',
children: [
{ name: '子节点1' },
{ name: '子节点2' }
]
},
{
name: '父节点2',
children: [
{ name: '子节点3' },
{
name: '子节点4',
children: [
{ name: '孙节点1' }
]
}
]
}
];
buildTree(treeData, document.getElementById('treeContainer'));添加动画效果
使用CSS过渡为展开/折叠添加平滑动画：
.tree ul {
overflow: hidden;
transition: max-height 0.3s ease-out;
max-height: 0;
}
.tree .active + ul {
max-height: 1000px;
}完整组件实现
结合以上代码，可以创建一个完整的树形菜单组件。根据实际需求，可以进一步添加功能如：
- 复选框选择
- 右键菜单
- 拖拽排序
- 异步加载子节点数据
实现时注意保持代码模块化和可维护性，对于复杂场景可以考虑使用现有库如jsTree或zTree。
