JavaScript eventListener仅在.burger元素的部分区域生效问题求助

问题原因 #

造成点击仅部分生效的核心原因有2个：

• 处于隐藏状态的.nav-container仅设置了opacity:0，透明度为0的元素仍然会占据DOM层级，拦截它覆盖范围内的所有点击事件，汉堡按钮的左侧区域刚好被这个透明元素遮挡，点击无法触发绑定的事件
• .burger设置了margin-left:40%，挤压了元素本身的可交互宽度，同时没有设置内边距，点击热区仅覆盖三条横线和极窄的周边区域

修复方案 #

你可以直接按下面的代码修改对应部分：

1. 修正全局样式错误

把全局通配符里的无效box-sizing值改成正确的：

* {
  margin: 0px;
  padding: 0;
  box-sizing: border-box;
}

2. 修复透明导航栏拦截点击的问题

给隐藏状态的导航容器添加点击穿透属性，显示时恢复点击响应：

.nav-container {
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: .2s ease-in-out;
  transform: translateY(-20%);
  transform-origin: left;
  pointer-events: none; /* 新增：隐藏状态下不拦截点击 */
  /* 原有ul相关样式保持不变 */
}

.show-nav {
  opacity: 1;
  transform: translateY(20%);
  pointer-events: auto; /* 新增：显示状态下恢复点击响应 */
}

3. 优化汉堡按钮的点击热区

调整汉堡按钮的布局属性，扩大可点击区域：

.burger {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-left: 0; /* 去掉原有的40%左外边距 */
  background-color: red;
  padding: 10px 15px; /* 新增内边距扩大点击热区 */
  min-height: 44px; /* 符合无障碍规范的最小点击尺寸 */
  cursor: pointer; /* 悬停显示手型，方便识别可交互区域 */
}

修改完成后整个汉堡按钮的区域都可以正常触发点击事件。

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