汉堡菜单切换屏幕尺寸后显示异常问题求助

问题根源 #

你遇到的核心问题是行内样式优先级高于CSS媒体查询：用JS直接给.nav-items设置style.display后，行内样式会覆盖媒体查询里的CSS规则，导致切换屏幕尺寸时，原本应该生效的display:flex（桌面端）或display:none（移动端默认）失效。另外你的JS逻辑里先设置display:flex再改成block，属于冗余操作，也不符合布局需求。

修复方案 #

改用CSS类控制显示状态，配合窗口resize事件重置菜单状态，让CSS完全负责样式逻辑，JS只做状态切换：

1. 修改CSS

添加控制菜单显示的类，调整媒体查询里的样式：

.wrapper {
  background: white;
  margin: 0 0;
  padding-top: 12px;
  padding-bottom: 12px;
  box-shadow: 0px 2px 11.3px 0px rgba(0, 0, 0, 0.02);
}

nav {
  display: flex;
  justify-content: space-around;
  padding-left: 64px;
  padding-right: 64px;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-items {
  display: flex;
  justify-content: space-around;
  gap: 32px;
}

/* 添加这个类控制菜单显示 */
.nav-items.active {
  display: flex !important;
}

ul {
  list-style-type: none;
  display: flex;
  gap: 32px;
  padding: 0;
}

li {
  padding-left: 8px;
  padding-right: 8px;
}

li a {
  text-decoration: none;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: gray;
}

li a:hover {
  color: black;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  width: 150px;
  height: 42px;
  padding: 10px 20px;
  background: #A900E4;
  color: white;
  border: 0;
  border-radius: 4px;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
}

.hamburger {
  display: none;
}

@media screen and (max-width: 768px) {
  nav {
    flex-direction: column;
    align-content: center;
  }
  .nav-items {
    flex-direction: column;
    gap: 8px;
    display: none;
  }
  .logo {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
  }
  ul {
    flex-direction: column;
    justify-content: center;
    margin-top: 32px;
    margin-bottom: 32px;
  }
  li {
    text-align: center;
  }
  .links {
    display: flex;
    justify-content: center;
  }
  .button {
    margin-bottom: 32px;
  }
  .hamburger {
    display: block;
  }
}

2. 重写JS逻辑

去掉行内样式操作，改用切换类，同时监听窗口resize事件重置菜单状态：

const navItems = document.querySelector(".nav-items");
let isMenuOpen = false;

function toggleMenu() {
  isMenuOpen = !isMenuOpen;
  navItems.classList.toggle("active", isMenuOpen);
}

// 监听窗口尺寸变化，重置菜单状态
window.addEventListener('resize', () => {
  if (window.innerWidth > 768) {
    // 桌面端强制显示菜单，移除active类
    navItems.classList.remove("active");
    isMenuOpen = false;
  } else {
    // 移动端默认隐藏，除非之前手动打开
    if (!isMenuOpen) {
      navItems.classList.remove("active");
    }
  }
});

3. 修改HTML的点击事件

把onclick里的dropdown()改成toggleMenu()：

<div class="wrapper">
  <nav>
    <div class="logo">
      <h3>Hello</h3>
      <div class="hamburger">
        <i onclick="toggleMenu()" class="fa-solid fa-bars"></i>
      </div>
    </div>
    <div class="nav-items">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">My Works</a></li>
      </ul>
      <div class="button">
        <button>Get in touch</button>
      </div>
    </div>
  </nav>
</div>
<script src="https://kit.fontawesome.com/dd8784c5d5.js" crossorigin="anonymous"></script>

为什么这样改？ #

• 用CSS类控制显示，媒体查询的样式可以正常生效，不会被行内样式覆盖。
• resize事件监听确保切换屏幕尺寸时，菜单状态符合当前断点的默认规则：桌面端始终显示，移动端默认隐藏（除非手动打开）。
• JS逻辑更简洁，只负责切换状态，样式完全交给CSS，符合前端开发的职责分离原则。

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