JavaScript如何实现折叠菜单

# JavaScript如何实现折叠菜单

折叠菜单是网页中常见的交互组件，能够有效节省页面空间。下面介绍如何使用原生JavaScript实现一个基础的折叠菜单功能。

## 基本HTML结构
```html
<div class="menu">
  <button class="menu-btn">菜单标题</button>
  <ul class="menu-content">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>

CSS样式设置

.menu-content {
  display: none; /* 默认隐藏 */
  list-style: none;
  padding: 0;
}
.menu-content.show {
  display: block; /* 展开时显示 */
}

JavaScript实现逻辑

document.querySelector('.menu-btn').addEventListener('click', function() {
  const content = document.querySelector('.menu-content');
  content.classList.toggle('show'); // 切换显示/隐藏
  
  // 可选：添加动画效果
  content.style.transition = 'max-height 0.3s ease';
  content.style.maxHeight = content.classList.contains('show') 
    ? content.scrollHeight + 'px' 
    : '0';
});

实现要点

1. 事件监听：通过click事件触发菜单状态切换
2. classList API：使用toggle方法切换CSS类
3. 动画优化：通过max-height属性实现平滑展开/收起效果
4. 可访问性：可添加aria-expanded属性辅助屏幕阅读器

扩展建议

• 支持多级嵌套菜单
• 添加键盘导航支持
• 使用事件委托优化性能

完整实现约需20-30行代码，可根据实际需求调整交互细节。 “`