hamburger下拉菜单切换后导航栏在大屏端消失的CSS与JS修复问题

问题根源 #

你直接用JS给导航栏设置了style.display内联样式，CSS内联样式的优先级远高于媒体查询里的类选择器样式，所以当屏幕宽度超过768px时，媒体查询里本来要生效的导航栏显示规则被内联的display: none覆盖了，才会出现导航消失的问题。

方案1：用状态类切换代替直接修改内联样式（最推荐） #

所有显示逻辑归CSS统一管理，不需要额外监听窗口变化，维护成本更低。

修改CSS

在原有小屏媒体查询规则里新增导航展开的状态类，同时补全大屏默认显示规则：

/* 大屏默认规则 */
@media screen and (min-width: 769px) {
  .navigation {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  /* 原有代码保留 */
  .header-container {
    padding: 15px;
  }
  .navigation {
    display: none;
  }
  .burger {
    display: block;
  }
  /* 新增小屏下导航展开的专用类 */
  .navigation.mobile-show {
    display: block;
  }
}

修改JS逻辑

把直接修改style.display改为切换状态类：

const burgerBar = document.querySelector('.burger');
const navigation = document.querySelector('.navigation');
const navbarItems = document.querySelector('.navbar-items');
const navbarItem = document.querySelector('.navbar-item');

burgerBar.addEventListener('click', () => {
  navigation.classList.toggle('mobile-show');
})

方案2：兼容现有写法，监听窗口尺寸自动重置样式 #

如果不想改动现有切换逻辑，可以新增窗口尺寸监听事件，屏幕超过阈值时自动清空内联样式，让CSS媒体查询规则重新接管：

// 原有点击逻辑保留
const burgerBar = document.querySelector('.burger');
const navigation = document.querySelector('.navigation');
const navbarItems = document.querySelector('.navbar-items');
const navbarItem = document.querySelector('.navbar-item');

burgerBar.addEventListener('click', () => {
  if (navigation.style.display != 'block') {
    navigation.style.display = 'block'
  } else {
    navigation.style.display = 'none'
  }
})

// 新增窗口resize监听
window.addEventListener('resize', () => {
  if (window.innerWidth > 768) {
    // 清空内联display样式，恢复媒体查询的默认规则
    navigation.style.display = '';
  }
})

内容的提问来源于stack exchange，提问作者Jason Todd