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。