本文讲解如何通过 css 类切换（而非内联样式）和响应式逻辑，彻底解决移动端页面加载时导航栏意外展开的问题，并提升代码可维护性与无障碍访问支持。
在开发响应式导航栏时，一个常见却容易被忽视的问题是：当屏幕缩放到移动设备尺寸（如 ≤768px）后，页面刷新或首次加载时导航栏自动展开——即使用户尚未点击菜单按钮。这通常源于 JavaScript 直接操作 style.height 导致的状态残留，或缺乏对初始状态的显式控制。
根本原因在于您原始代码中：
- openNav() 和 closeNav() 仅通过 element.style.height = "100%" 或 "0%" 控制显示，但未重置其他影响布局的属性（如 overflow, visibility）；
- 移动端媒体查询生效后，若 #nav_bar 初始 height 被 JS 设为 "100%" 并保留在内联样式中，CSS 的 height: auto 或 max-height 规则将被覆盖，导致“自动展开”；
- 缺乏对 aria-expanded 状态的同步更新，影响屏幕阅读器体验。
✅ 推荐解决方案：使用 classList.toggle() + CSS 类控制显隐
这是更健壮、语义化且符合现代 Web 最佳实践的方式。我们不再依赖内联 height 操作，而是通过添加/移除一个预定义的 .d-none 类来统一控制显示状态：
.d-none {
display: none !important;
}配合简洁的 JavaScript：
const toggleBtn = document.querySelector('#toggle_navBar');
const nav = document.querySelector('nav');
// 初始化：确保移动端默认隐藏（关键！）
if (window.matchMedia('(max-width: 768px)').matches) {
nav.classList.add('d-none');
}
toggleBtn.addEventListener('click', () => {
nav.classList.toggle('d-none');
// 同步更新 aria-expanded 属性（无障碍必备）
const isExpanded = !nav.classList.contains('d-none');
toggleBtn.setAttribute('aria-expanded', isExpanded);
// 若关闭按钮独立存在，也需同步其 aria-expanded
});? HTML 结构优化建议（增强语义与可访问性）：
<nav aria-label="主菜单" id="main-nav">
@@##@@
<ul class="nav-list">
<li><a href="#" class="list-item">Home</a></li>
<li><a href="#" class="list-item">About Me</a></li>
<li><a href="#" class="list-item">Projects</a></li>
<li><a href="#" class="list-item">C.V</a></li>
<li><a href="#" class="list-item">Contact</a></li>
</ul>
</nav>
<!-- 使用 button 元素替代 a 标签触发交互，更语义化 -->
<button
id="toggle_navBar"
aria-expanded="false"
aria-controls="main-nav"
aria-label="切换导航菜单"
>
<i class="bi bi-list"></i>
</button>? 关键注意事项：
- ✅ 始终初始化状态：在 JS 加载时，用 matchMedia 检测当前视口，主动为移动端设置 nav.classList.add('d-none')，避免 CSS 与 JS 状态不一致；
- ✅ 用 ： 默认有跳转行为，而按钮语义更准确，也无需 preventDefault()；
- ✅ 同步 aria-expanded 与实际状态：这对屏幕阅读器用户至关重要，也是 SEO 友好性的加分项；
- ✅ 避免 !important（除非必要）：.d-none { display: none; } 通常足够；若被其他高优先级规则覆盖，应重构 CSS 选择器层级，而非滥用 !important；
- ✅ 移动端默认隐藏，桌面端默认显示：可在 CSS 中补充：
@media (min-width: 769px) { nav.d-none { display: flex !important; /* 或按原布局方式恢复 */ } }
通过以上改造，您的导航栏将真正实现“按需展开、状态可控、响应可靠、人人可用”。告别神秘的自动展开，拥抱清晰、可维护、无障碍的前端实践。
