响应式导航栏汉堡按钮点击切换下拉菜单失效问题求助

我帮你找到了两个核心问题，这就是菜单没正常展开的原因：

1. 错误地给汉堡按钮添加了show类 #

你的CSS规则是给.nav_list.show设置显示样式，但当前JavaScript代码里却在汉堡按钮上切换show类，完全没操作到导航列表元素。这就好比你想开灯，却按了电视遥控器——逻辑完全不对。

2. CSS类名拼写不一致 #

在媒体查询中你写了.hamburger（末尾是er），但HTML、JS和其他CSS规则里用的是.hamburgur（末尾是ur），这会导致大屏下汉堡按钮无法被隐藏，属于低级拼写错误。

修正后的完整代码： #

JavaScript代码

const hambrugerBtn = document.getElementById("hamburgur");
const nav_list = document.getElementById("nav_list");
function toggledevent() {
  // 切换导航列表的show类，而不是按钮的
  nav_list.classList.toggle("show");
  console.log("clicked");
}
hambrugerBtn.addEventListener("click", toggledevent);

CSS代码

.hamburgur {
  border: 0;
  background-color: transparent;
  width: 10px;
}
.nav_list {
  display: none;
}
.nav_list.show {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 700px) {
  /* 修正类名拼写，和HTML保持一致 */
  .hamburgur {
    display: none;
  }
  .nav_list {
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
  }
}

HTML代码（无需修改，保持原样即可）

<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script>
<nav>
  <img class="logo" id="funnylogo" src="images/funny_logo-removebg-preview.png" alt="About Section" />
  <button class="hamburgur" id="hamburgur">
    <i class="fa-solid fa-bars"></i>
  </button>
  <ul class="nav_list" id="nav_list">
    <li>
      <a href="#about_me_heading"> About Me</a>
    </li>
    <li><a href=""> Profile</a></li>
    <li><a href="contact/contact.html"> For Contact</a></li>
  </ul>
</nav>

现在点击汉堡按钮，导航列表就会正常展开/收起了，同时大屏下汉堡按钮也能正确隐藏。

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