js 实现的收缩菜单

2026-04-04 07:50:39JavaScript

收缩菜单实现方法

HTML 结构 创建基础菜单结构，包含父级菜单项和子菜单列表：

<div class="menu">
  <div class="menu-item">
    <div class="menu-header">主菜单1</div>
    <ul class="submenu">
      <li>子项1</li>
      <li>子项2</li>
    </ul>
  </div>
</div>

CSS 样式 设置默认样式和收缩状态：

js 实现的收缩菜单

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.submenu.active {
  max-height: 200px;
}

JavaScript 逻辑 通过事件监听实现切换功能：

document.querySelectorAll('.menu-header').forEach(header => {
  header.addEventListener('click', () => {
    const submenu = header.nextElementSibling;
    submenu.classList.toggle('active');
  });
});

动画优化方案

使用 requestAnimationFrame 实现更流畅的动画效果：

js 实现的收缩菜单

function toggleMenu(element) {
  const start = Date.now();
  const duration = 300;

  function animate() {
    const elapsed = Date.now() - start;
    const progress = Math.min(elapsed / duration, 1);
    element.style.height = `${progress * 200}px`;

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

多级菜单支持

递归处理子菜单 适应多层级结构：

function initMenu(container) {
  container.querySelectorAll('.menu-header').forEach(header => {
    header.addEventListener('click', (e) => {
      e.stopPropagation();
      const submenu = header.nextElementSibling;
      submenu.classList.toggle('active');
    });

    if(header.nextElementSibling) {
      initMenu(header.nextElementSibling);
    }
  });
}

键盘可访问性

添加键盘导航支持 符合无障碍标准：

menuItems.forEach(item => {
  item.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      item.click();
    }
  });
});