本文讲解如何通过 `classlist.toggle()` 替代内联样式操作，解决移动端视口下导航栏自动展开的常见问题，并提升代码可维护性与无障碍访问支持。

在开发响应式导航栏时，一个高频痛点是：当屏幕缩放到移动尺寸（如 ≤768px）后，导航栏未经用户点击就自动显示（即“Auto Toggling On”）。这通常源于 JavaScript 直接修改 style.height 的硬编码逻辑与 CSS 媒体查询行为冲突——例如，height: 100% 在移动端被强制应用，而 JS 未在页面加载或窗口重置时主动重置状态。

根本解法不是修补 openNav()/closeNav() 的调用时机，而是将显隐控制权交还给 CSS 类系统，用语义化、可预测的方式管理状态。

✅ 推荐方案：使用 classList.toggle() + CSS 类控制显隐

首先，在 CSS 中定义一个简洁、明确的隐藏类：

.d-none {
  display: none !important;
}

⚠️ 注意：!important 可确保它能覆盖媒体查询中可能设置的 display: flex/block，避免样式优先级冲突。

接着，重构 JavaScript，摒弃 getElementById().style.xxx 这类易出错的内联操作，改用现代 DOM 方法：

// 获取 DOM 元素（推荐使用 querySelector，更灵活）
const toggleBtn = document.querySelector('#toggle_navBar');
const navBar = document.querySelector('nav');

// 单一事件监听器，切换状态
toggleBtn.addEventListener('click', () => {
  navBar.classList.toggle('d-none');
});

HTML 结构同步优化为语义化写法（关键改进）：

✅ 语义增强说明：