使用Checkbox切换CSS样式：汉堡菜单页面变暗功能失效求助

你的代码核心问题有两个：一是JavaScript函数没有绑定到复选框的状态变化事件上，导致点击汉堡菜单时不会触发遮罩层的显示/隐藏；二是遮罩层#black缺少必要的CSS样式，即使显示了也看不到变暗效果。下面是具体的修复方案：

1. 修复JavaScript事件绑定 #

把逻辑改成监听复选框的change事件，确保状态变化时触发遮罩层切换：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const cb = document.querySelector('#mycheckbox');
  const black = document.querySelector('#black');

  // 监听复选框状态变化
  cb.addEventListener('change', function() {
    black.style.display = this.checked ? 'block' : 'none';
  });
});

2. 添加遮罩层的CSS样式 #

给#black添加必要样式，让它覆盖整个页面并呈现半透明黑色效果：

#black {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7); /* 可调整透明度数值 */
  z-index: 99; /* 确保在页面内容上方 */
}

3. 可选：确保菜单层级高于遮罩层 #

如果汉堡菜单被遮罩层挡住，给菜单容器添加更高的层级：

#menuToggle {
  position: relative;
  z-index: 100; /* 高于遮罩层的z-index */
}

修改完成后，点击汉堡菜单的复选框时，遮罩层会正常显示/隐藏，实现页面其余部分变暗的效果。

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