如何通过两个独立div类实现移动端汉堡菜单的打开与关闭功能

实现方案 #

第一步：修正&补充CSS样式

你现有代码中.nav-container的前缀位移属性存在笔误，水平偏移应使用translateX而非translateY，同时新增菜单激活状态的匹配样式：

/* 修正原有.nav-container的前缀属性错误 */
.nav-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 340px;
  height: 100%;
  background-color: #000;
  transform: translateX(-340px);
  -webkit-transform: translateX(-340px);
  -ms-transform: translateX(-340px);
  transition: all 0.5s;
}

/* 新增激活状态样式 */
.nav.open {
  visibility: visible;
}
.nav.open .nav-container {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
}

/* 原有移动端样式保持不变即可 */
@media only screen and (max-width: 1276px) {
  /* 你原有的移动端CSS代码不用改动 */
}

第二步：添加JavaScript控制逻辑

直接在页面引入以下原生JS代码即可实现开关控制：

document.addEventListener('DOMContentLoaded', function() {
  const menuIcon = document.querySelector('.menu-icon');
  const closeBtn = document.querySelector('.close');
  const nav = document.querySelector('.nav');
  const navBg = document.querySelector('.nav-bg-close');

  // 点击菜单图标打开
  menuIcon.addEventListener('click', function() {
    nav.classList.add('open');
  });

  // 点击关闭按钮关闭
  closeBtn.addEventListener('click', function() {
    nav.classList.remove('open');
  });

  // 可选：点击菜单外背景区域关闭
  navBg.addEventListener('click', function() {
    nav.classList.remove('open');
  });
});

实现说明

• 靠类名切换控制样式状态，避免直接操作DOM样式，性能和可维护性更好
• 保留了你原有过渡动画的设置，菜单弹出/收起会有0.5s的平滑过渡效果
• 额外补充了点击背景关闭的逻辑，符合移动端通用交互习惯，如果不需要删除对应代码即可

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