本文介绍通过 css 媒体查询与 javascript 类切换协同工作，解决移动端导航菜单展开后在桌面端尺寸下无法自动收起的问题，确保响应式导航行为始终符合当前视口条件。
本文介绍通过 css 媒体查询与 javascript 类切换协同工作，解决移动端导航菜单展开后在桌面端尺寸下无法自动收起的问题，确保响应式导航行为始终符合当前视口条件。
在构建响应式导航栏时，一个常见痛点是：当用户在小屏幕（如手机）下点击汉堡按钮展开菜单后，若随后调整浏览器窗口变大（或横屏转竖屏、平板切桌面），菜单仍保持“已展开”状态，违背了 @media (max-width: 813px) 的设计意图——即仅在窄屏下启用折叠/展开逻辑。
根本原因在于原始代码中使用 .css("display", "block") 直接修改内联样式，这会覆盖 CSS 媒体查询的声明优先级（内联样式权重大于媒体查询中的普通规则），导致即使屏幕变宽，.navList ul 仍被强制设为 display: block，无法回归默认的 flex 显示。
✅ 正确解法：用 CSS 类控制状态，而非直接操作样式
将展开/收起逻辑解耦为「类的切换」，再让该类的样式效果仅在对应媒体查询范围内生效。这样，当屏幕尺寸超出阈值时，媒体查询失效，.open 类即使存在也无实际作用；而当屏幕回到窄屏时，.open 才真正触发 display: block。
以下是优化后的完整实现：
1. 更新 JavaScript（推荐使用原生写法，避免依赖 jQuery）：
document.querySelector('.navDropdown').addEventListener('click', () => {
const $ul = document.querySelector('.navList ul');
$ul.classList.toggle('open');
});2. 调整 CSS（关键：.open 仅在窄屏下生效）：
/* 原有基础样式保持不变 */
.navList ul {
display: flex; /* 默认桌面态：始终显示 */
margin-bottom: 0;
}
/* 窄屏下：默认隐藏，仅当有 .open 类时才显示 */
@media (max-width: 813px) {
.navList ul {
display: none;
}
.navList ul.open {
display: block;
}
.navDropdown {
display: inline-block;
}
}3. HTML 无需改动（保留结构语义）：
<nav>
<div class="navList">
<ul>
<li class="navImg"><img src="./Images/Logo (1).png" alt="Logo" /></li>
<li><a href="#">Home</a></li>
<li><a href="#">Collection</a></li>
<li><a href="#">Wholesale</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button class="navDropdown">☰</button>
</div>
</nav>? 为什么这样更健壮？
- ✅ 响应式优先：.open 类本身不定义样式，只作为“开关”，其视觉效果完全由媒体查询托管，天然适配尺寸变化；
- ✅ 无状态残留：窗口缩放时，CSS 引擎自动重新计算匹配规则，无需监听 resize 事件或手动清理；
- ✅ 可维护性强：行为（JS）与表现（CSS）分离，未来扩展动画、过渡效果或新增断点都只需改 CSS；
- ✅ 兼容性好：classList.toggle() 支持所有现代浏览器，且比 jQuery 更轻量。
⚠️ 注意事项：
- 避免在媒体查询外定义 .open { display: block }，否则会破坏响应逻辑；
- 若需支持旧版 IE，可回退使用 className 操作 + 正则判断，但建议优先保障现代浏览器体验；
- 如需平滑过渡效果，可在 .navList ul 上添加 transition: max-height 0.3s ease, opacity 0.3s ease 并配合 max-height 和 overflow: hidden 控制（注意 display 不支持过渡，需换用其他可动画属性）。
通过这一模式，你的导航栏将真正实现「尺寸驱动行为」——窄屏下交互可控，宽屏下回归原生布局，无需任何额外监听或重置逻辑。
