Bootstrap如何实现响应式的侧边栏菜单在点击外部阴影时自动关闭-Bootstrap教程-PHP中文网

offcanvas遮罩点击关闭需满足四条件：data-bs-backdrop="true"、正确data-bs-toggle与data-bs-target配对、方向类（offcanvas-start/end）存在、引入bootstrap.bundle.min.js；禁用点击关闭则设data-bs-backdrop="static"。

bootstrap如何实现响应式的侧边栏菜单在点击外部阴影时自动关闭

Bootstrap 5.2+ 的 offcanvas 组件默认就支持点击外部遮罩（即灰色半透背景）自动关闭，无需额外 JS —— 但前提是配置正确，否则会失效或行为异常。

offcanvas-backdrop 点击无响应的常见原因

很多人发现点击遮罩没反应，实际是以下配置被无意覆盖或遗漏：

data-bs-backdrop="true" 被删掉或设为 "false"（默认值就是 true，但显式写出来更保险）
触发按钮没加 data-bs-toggle="offcanvas"，或 data-bs-target 指向的 ID 和 offcanvas 容器的 id 不一致
offcanvas 容器缺少 offcanvas-start 或 offcanvas-end 类（仅靠 offcanvas 类不足以启用完整交互逻辑）
手动引入了 Bootstrap CSS 但漏掉了 bootstrap.bundle.min.js（offcanvas 依赖 Popper + JS，单独引入 bootstrap.min.js 不够）

如何禁用遮罩点击关闭但保留遮罩显示

想让遮罩存在但不响应点击（比如只允许点击关闭按钮或 ESC 关闭），只需把 data-bs-backdrop 改为 "static"：

<div class="offcanvas offcanvas-start" id="sidebar" data-bs-backdrop="static" data-bs-keyboard="true">
<p>注意：<code>data-bs-backdrop="static"</code> 时，用户无法通过点遮罩关闭，必须提供显式的关闭方式（如 <code>data-bs-dismiss="offcanvas"</code> 按钮），否则菜单可能卡住。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
														src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
													<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

<h3>点击遮罩关闭后，如何清理状态（比如重置搜索框）</h3>
<p>遮罩点击触发的是标准关闭流程，事件监听要用 <code>hidden.bs.offcanvas</code>（不是 <code>hide.bs.offcanvas</code>）：</p>
<pre class="brush:php;toolbar:false;">const offcanvasEl = document.getElementById('sidebar');
const offcanvas = new bootstrap.Offcanvas(offcanvasEl);

offcanvasEl.addEventListener('hidden.bs.offcanvas', function () {
  const searchInput = this.querySelector('input[type="search"]');
  if (searchInput) searchInput.value = '';
  // 其他清理：清空定时器、重置 active 状态、释放资源等
});

关键点：