大屏幕尺寸下汉堡菜单自动隐藏及移除.show类的技术问题求助

嘿，我完全懂你遇到的困扰——当屏幕从小尺寸切换到大尺寸时，汉堡菜单居然还保持打开状态，这确实破坏了页面的布局体验。别担心，作为JavaScript新手，这个问题其实非常好解决，咱们一步步来修复它！

问题根源 #

你的当前代码只处理了点击汉堡按钮时的菜单切换逻辑，但没有监听屏幕尺寸变化的事件。所以当屏幕突然变大时，没有触发任何关闭菜单的操作，导致菜单依然停留在打开状态。

解决方案：监听窗口尺寸变化 #

我们需要添加一个resize事件监听器，每当窗口尺寸改变时，自动检查当前屏幕是否属于“大屏幕”范围，如果是，就强制关闭菜单并移除所有.show类。

修改后的JavaScript代码

// 选择DOM元素
const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.nav-menu');
const menuNav = document.querySelector('.nav-ul');
const navItems = document.querySelectorAll('.nav-item');

// 设置菜单初始状态
let showMenu = false;

// 汉堡按钮点击事件
menuBtn.addEventListener('click', toggleMenu);

// 监听窗口尺寸变化事件
window.addEventListener('resize', handleScreenResize);

function toggleMenu() {
  if(!showMenu) {
    menuBtn.classList.add('close');
    menu.classList.add('show');
    menuNav.classList.add('show');
    navItems.forEach(item => item.classList.add('show'));
    showMenu = true;
  } else {
    menuBtn.classList.remove('close');
    menu.classList.remove('show');
    menuNav.classList.remove('show');
    navItems.forEach(item => item.classList.remove('show'));
    showMenu = false;
  }
}

// 处理屏幕尺寸变化的函数
function handleScreenResize() {
  // 这里的768px是假设的大屏幕断点，你可以根据自己的设计调整
  const isLargeScreen = window.innerWidth >= 768;
  
  if (isLargeScreen && showMenu) {
    // 强制关闭菜单，和toggleMenu里的关闭逻辑一致
    menuBtn.classList.remove('close');
    menu.classList.remove('show');
    menuNav.classList.remove('show');
    navItems.forEach(item => item.classList.remove('show'));
    showMenu = false;
  }
}

// 页面加载时也检查一次屏幕尺寸（避免刷新时大屏幕下菜单仍打开）
handleScreenResize();

补充CSS优化

为了确保万无一失，建议在CSS的媒体查询中，直接隐藏大屏幕下的汉堡按钮和菜单：

@media screen and (min-width: 768px) {
  .nav-logo-wrapper .menu-btn {
    display: none;
  }
  .nav-menu {
    display: none !important; /* 覆盖.show类的display属性 */
  }
}

关键细节解释 #

• 窗口resize事件：每次用户调整窗口大小，或者设备旋转（比如手机转平板）时都会触发这个事件，我们在这里做屏幕尺寸判断。
• 同步showMenu状态：一定要把showMenu设置为false，否则后续点击汉堡按钮时会出现状态不一致的问题（比如明明菜单已经关闭，但JS认为它还开着）。
• 页面加载时检查：添加handleScreenResize()在代码最后，避免用户直接在大屏幕下刷新页面时，菜单依然处于打开状态。

这样修改后，不管是切换屏幕尺寸，还是直接在大屏幕打开页面，菜单都会乖乖隐藏啦！

内容的提问来源于stack exchange，提问作者dick dastardly