使用Vanilla JS制作响应式导航栏时汉堡切换按钮失效问题求助

首先存在两个直接导致功能失效的错误：

• 类名拼写不一致：HTML中汉堡按钮的类名为humburger（拼写错误），但CSS和JS中引用的是正确拼写的hamburger，导致JS无法选中对应元素，点击事件绑定失败。
• CSS选择器缺少状态限定：当前媒体查询内的样式没有关联active类，会导致屏幕宽度小于768px时汉堡按钮直接显示为叉形，而非点击后才切换状态。

span标签作用 #

三个带bar类的span标签是汉堡按钮的视觉载体，分别对应汉堡按钮的三根横线，你需要额外给.bar补充基础的宽高、背景色、块级显示、过渡动画等样式，否则默认行内属性的span不会显示可见效果。

JavaScript代码逻辑 #

1. 首先通过document.querySelector分别选中汉堡按钮和导航菜单两个DOM元素
2. 给汉堡按钮绑定点击事件，点击时触发mobileMenu函数
3. mobileMenu函数通过classList.toggleAPI给两个元素切换active类：元素有active类时就移除，没有时就添加，以此实现菜单展开/收起的开关效果。

1. 把HTML中汉堡按钮的类名修改为hamburger
2. 调整CSS媒体查询内的选择器，增加active状态限定：

@media only screen and (max-width: 768px) {
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

3. 补充缺失的基础样式，保证元素可见和交互正常：

/* 汉堡横线基础样式 */
.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: #101010;
}
/* 桌面端隐藏汉堡按钮 */
.hamburger {
  display: none;
}
@media only screen and (max-width:768px) {
  /* 移动端显示汉堡按钮 */
  .hamburger {
    display: block;
    cursor: pointer;
  }
  /* 移动端默认隐藏导航菜单 */
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    flex-direction: column;
    background-color: #fff;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0,0,0,0.05);
  }
  /* 激活状态下显示菜单 */
  .nav-menu.active {
    left: 0;
  }
}

内容的提问来源于stack exchange，提问作者jerome richard A R