导航菜单无法折叠通常因媒体查询或 Flexbox 设置不当，需用 @media 控制断点，结合 flex-direction: column 与 max-height 切换实现响应式折叠效果。
在使用 CSS响应式布局 时，如果导航菜单无法正常折叠，通常是由于媒体查询设置不当或 Flexbox 属性未正确切换导致的。要实现移动端下导航的折叠效果，可以通过 media 查询 结合 flex-direction 与display等属性来控制菜单的显示方式。
检查 HTML 结构是否合理
确保导航结构语义清晰，通常使用 nav 标签包裹菜单项，并为菜单容器添加一个明确的类名，例如：
使用 Flex 布局和 Media Query 控制显示
默认在桌面端让菜单横向排列，在移动端竖向堆叠并隐藏。关键在于利用 @media 查询屏幕宽度，并通过 flex-direction: column 实现垂直布局。
.navbar {display: flex; justify-content: space-between; align-items: center;} .nav-menu {display: flex; list-style: none; margin: 0; padding: 0;}
.nav-menu li {margin: 0 1rem;}
.nav-menu a {text-decoration: none; color: #333;}
/ 移动端样式 / @media (max-width: 768px) {.nav-menu { flex-direction: column; width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.3s ease;}
.nav-menu.active {max-height: 300px; / 根据实际内容调整 / } }
添加 JavaScript 控制折叠开关
仅靠 CSS 无法动态切换展开状态，需用 JavaScript 控制 active 类的添加与移除。
立即学习 “ 前端免费学习笔记（深入）”；
const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('.nav-menu'); hamburger.addEventListener('click', () => {navMenu.classList.toggle('active'); });
点击汉堡图标时，菜单会在 column 方向展开或收起。若不加 JS，只能通过：hover 模拟，不适合移动端。
常见问题 排查
- 菜单不折叠 ：检查
max-height: 0和overflow: hidden是否生效 - 移动端仍横向显示：确认 media query 断点是否覆盖目标设备（如 768px 以下）
- 动画卡顿 ：避免使用
height: auto做过渡，改用max-height固定值 - flex-direction 未切换：确保在 media query 中明确设置
flex-direction: column
基本上就这些。只要结构清晰、媒体查询准确、JS 触发到位，导航就能在小屏幕上顺利折叠。关键是让布局随屏幕变化自然响应，而不是强行隐藏元素。
