19. 响应式菜单：移动端导航与展开收起

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

按钮状态建议同步 `aria-expanded`。
移动端菜单要考虑点击外部和 ESC 关闭。
菜单打开状态最好集中由一个函数控制。

四、练习建议

给当前菜单项添加 active 样式。
改成侧边抽屉菜单。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/19-responsive-menu.js，下面同步展示，方便学习和复制。

// 页面 19：响应式菜单展开收起
const menuToggle = document.querySelector('#p19-toggle');
const mobileMenu = document.querySelector('#p19-menu');
const menuOutput = document.querySelector('#p19-output');

function isMenuOpen() {
  return !mobileMenu.classList.contains('hidden');
}

function setMenu(open) {
  mobileMenu.classList.toggle('hidden', !open);
  menuToggle.setAttribute('aria-expanded', String(open));
  menuToggle.textContent = open ? '× 关闭菜单' : '☰ 打开菜单';
  menuOutput.textContent = open ? '菜单已展开' : '菜单已收起';
}

menuToggle.addEventListener('click', () => {
  setMenu(!isMenuOpen());
});

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && isMenuOpen()) {
    setMenu(false);
  }
});

document.addEventListener('click', (event) => {
  const clickedInside = event.target.closest('#p19-menu, #p19-toggle');
  if (!clickedInside && isMenuOpen()) {
    setMenu(false);
  }
});