如何无需JavaScript实现侧边栏展开时主内容的遮罩效果？

一、纯CSS实现（无需JavaScript，兼容现有Checkbox方案） #

完全可行，不用切换到JS，利用CSS的:checked伪类就能实现，步骤如下：

1. 添加遮罩元素
   在HTML的main元素之后插入遮罩DOM，用label关联checkbox，点击遮罩可直接关闭侧边栏：

<label class="overlay" for="openSideMenu"></label>

2. 设置遮罩样式
   通过CSS控制遮罩的隐藏/显示状态，以及过渡动画：

/* 遮罩默认状态：隐藏 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99; /* 层级低于侧边栏，确保侧边栏在上方 */
  cursor: pointer;
}

/* 侧边栏展开时显示遮罩 */
#openSideMenu:checked ~ .overlay {
  opacity: 1;
  visibility: visible;
}

/* 确保侧边栏层级高于遮罩 */
#sideMenu {
  z-index: 100;
  /* 保留原有侧边栏样式 */
}

如果DOM结构中checkbox和遮罩不是直接相邻兄弟，调整选择器即可（比如#sidebarContainer #openSideMenu:checked ~ #sideMenu ~ .overlay），适配实际层级关系。

3. 优化菜单项关闭逻辑
   将现有hideSidebar()函数简化为切换checkbox状态，自动同步关闭遮罩：

function hideSidebar() {
  document.getElementById('openSideMenu').checked = false;
}

二、JavaScript实现方案 #

如果需要复杂交互逻辑（比如结合多条件判断、自定义动画），可以用JS实现，步骤如下：

1. 添加遮罩元素
   插入基础遮罩DOM（无需关联label）：

<div class="overlay"></div>

2. 设置遮罩样式
   通过类名控制显示状态：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99;
  cursor: pointer;
}

/* 显示遮罩的激活类 */
.overlay.active {
  opacity: 1;
  visibility: visible;
}

#sideMenu {
  z-index: 100;
}

3. 编写JavaScript交互逻辑

const sidebarToggle = document.getElementById('openSideMenu');
const overlay = document.querySelector('.overlay');

// 监听侧边栏切换事件
sidebarToggle.addEventListener('change', () => {
  overlay.classList.toggle('active', sidebarToggle.checked);
});

// 点击遮罩关闭侧边栏
overlay.addEventListener('click', () => {
  sidebarToggle.checked = false;
  overlay.classList.remove('active');
});

// 菜单项点击关闭侧边栏
function hideSidebar() {
  sidebarToggle.checked = false;
  overlay.classList.remove('active');
}

总结 #

• 纯CSS方案更轻量，适合简单的侧边栏遮罩需求，完全兼容你现有的Checkbox实现；
• JS方案更灵活，适合需要扩展复杂交互的场景。

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