移动端汉堡菜单未关闭时放大屏幕不隐藏问题求助

算力阿峰

2026-8-13

解决汉堡菜单放大屏幕不自动隐藏的问题

你的判断没错，这个问题确实是JS没处理窗口尺寸变化的状态同步导致的——CSS媒体查询只在页面初始加载或样式刷新时生效，但JS给菜单加的激活类会覆盖CSS的默认隐藏状态，所以得用JS监听窗口 resize 事件来主动重置菜单状态。

具体解决步骤：

先确定你CSS里的移动端断点（比如常用的768px，即屏幕超过这个宽度就显示桌面导航）
写一个处理resize的函数，当屏幕宽度超过断点时，强制移除菜单和汉堡按钮的激活类
把这个函数绑定到窗口的resize事件上，同时初始加载时调用一次确保状态正确

修改后的JS代码示例（假设你用`active`类控制菜单显示隐藏）：

const hamburger = document.querySelector('.hamburger');
const mobileMenu = document.querySelector('.mobile-menu');
// 替换成你CSS里的移动端断点数值
const MOBILE_BREAKPOINT = 768;

// 原有菜单切换逻辑
function toggleMenu() {
  hamburger.classList.toggle('active');
  mobileMenu.classList.toggle('active');
}

// 窗口尺寸变化处理函数
function handleResize() {
  if (window.innerWidth >= MOBILE_BREAKPOINT) {
    // 超过移动端尺寸，强制隐藏菜单、重置按钮状态
    hamburger.classList.remove('active');
    mobileMenu.classList.remove('active');
  }
}

// 绑定点击事件
hamburger.addEventListener('click', toggleMenu);

// 绑定resize事件，初始加载时执行一次确保状态正确
window.addEventListener('resize', handleResize);
handleResize();