js实现三级菜单

实现三级菜单的JavaScript方法

HTML结构设计

创建一个嵌套的<ul>和<li>结构表示三级菜单层次：

<ul class="menu-level-1">
  <li>
    <span>一级菜单1</span>
    <ul class="menu-level-2">
      <li>
        <span>二级菜单1</span>
        <ul class="menu-level-3">
          <li><span>三级菜单1</span></li>
          <li><span>三级菜单2</span></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS样式准备

添加基础样式控制菜单显示/隐藏状态：

.menu-level-2, .menu-level-3 {
  display: none;
  padding-left: 20px;
}
.menu-level-1 > li, .menu-level-2 > li {
  position: relative;
  cursor: pointer;
}
.active > ul {
  display: block;
}

JavaScript交互逻辑

使用事件委托处理菜单点击行为：

document.addEventListener('DOMContentLoaded', function() {
  const menuContainer = document.querySelector('.menu-level-1');

  menuContainer.addEventListener('click', function(e) {
    const target = e.target.closest('li');
    if (!target) return;

    const subMenu = target.querySelector('ul');
    if (!subMenu) return;

    // 切换当前菜单状态
    target.classList.toggle('active');

    // 关闭同级其他菜单
    const siblings = Array.from(target.parentNode.children)
      .filter(child => child !== target);
    siblings.forEach(sib => sib.classList.remove('active'));
  });
});

动画效果增强

为菜单切换添加平滑动画：

.menu-level-2, .menu-level-3 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.active > ul {
  max-height: 500px;
}

键盘导航支持

增加无障碍访问支持：

menuContainer.addEventListener('keydown', function(e) {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    e.target.closest('li').click();
  }
});

实现注意事项

• 使用closest()方法确保点击事件正确处理嵌套元素
• 通过CSS过渡效果提升用户体验
• 事件委托减少事件监听器数量
• 合理设置max-height值确保动画效果自然
• 为菜单项添加tabindex="0"属性支持键盘导航

响应式设计建议

添加媒体查询适应移动设备：

@media (max-width: 768px) {
  .menu-level-1 {
    width: 100%;
  }
  .menu-level-2, .menu-level-3 {
    padding-left: 10px;
  }
}