求助：移动端汉堡菜单点击后无法隐藏（HTML/CSS/移动优先）

Hey Jonathan, 我来帮你搞定这个汉堡菜单的问题！你现在用移动优先思路搭站、用flexbox布局的方向完全没问题，但汉堡菜单的点击交互光靠现有CSS是没法实现的——CSS本身没法监听点击事件，不过我们可以用两种简单的方法解决，一种纯CSS就能搞定，另一种加几行JS更灵活，都给你列出来：

方法1：纯CSS实现（无需JavaScript） #

这种方法利用隐藏的复选框模拟点击触发逻辑，很适合你目前专注CSS学习的阶段：

1. 调整HTML结构 #

先把导航的结构改成这样，加入触发用的复选框和汉堡按钮：

<nav class="nav">
  <!-- 隐藏的复选框，用来承载点击状态 -->
  <input type="checkbox" id="menu-toggle" class="menu-toggle">
  <!-- 汉堡按钮，和复选框关联 -->
  <label for="menu-toggle" class="hamburger-btn">☰</label>
  <!-- 你的菜单内容 -->
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

2. 补充CSS样式 #

基于你已有的flex布局代码，添加这些样式：

/* 隐藏复选框，只用来触发状态 */
.menu-toggle {
  display: none;
}

/* 汉堡按钮的基础样式，可自定义 */
.hamburger-btn {
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
}

/* 移动优先：默认隐藏菜单 */
.menu {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  /* 加上你原来的其他样式，比如内边距、列表样式 */
  margin-top: 0.5rem;
  padding: 0;
  list-style: none;
}

/* 复选框被选中时，显示菜单 */
.menu-toggle:checked ~ .menu {
  display: flex;
}

点击汉堡按钮时，关联的复选框会被“选中”，通过CSS兄弟选择器~就能控制菜单的显示/隐藏，完全不需要JS。

方法2：JavaScript实现（更适合复杂交互） #

如果之后你想给菜单加动画、或者扩展更多交互逻辑，用JS会更灵活：

1. HTML结构 #

保持简洁的按钮和菜单结构：

<nav class="nav">
  <button class="hamburger-btn">☰</button>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

2. 调整CSS #

默认隐藏菜单，新增一个控制显示的类，还可以加过渡动画让效果更丝滑：

.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.menu {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  /* 可选：添加过渡动画 */
  transition: all 0.3s ease;
}

/* 用来控制菜单显示的类 */
.menu.active {
  display: flex;
}

.hamburger-btn {
  font-size: 2rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.5rem;
}

3. 几行JS代码 #

在HTML页面底部加入这段脚本，监听按钮点击事件：

const hamburgerBtn = document.querySelector('.hamburger-btn');
const menu = document.querySelector('.menu');

hamburgerBtn.addEventListener('click', () => {
  // 切换菜单的active类
  menu.classList.toggle('active');
  // 可选：切换汉堡按钮的图标，比如变成×
  hamburgerBtn.textContent = menu.classList.contains('active') ? '×' : '☰';
});

点击汉堡按钮时，菜单会添加/移除active类，从而实现显示/隐藏，还能顺便切换按钮图标，提升用户体验。

额外优化：适配大屏设备 #

移动优先的思路下，记得加媒体查询，在大屏设备上默认显示菜单、隐藏汉堡按钮：

@media (min-width: 768px) {
  .hamburger-btn {
    display: none;
  }
  .menu {
    display: flex;
    flex-direction: row;
    /* 大屏下的菜单样式调整，比如间距 */
    gap: 1.5rem;
  }
}

这样在平板或电脑上就会显示常规的导航栏，只有移动端才会触发汉堡菜单啦～

内容的提问来源于stack exchange，提问作者Jonathan Aldas