如何判断Bootstrap 5的offcanvas组件是否处于显示状态？

你提供的offcanvas基础HTML结构如下：

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>

有两种常用的判断方式，按需选择即可：

方法1：检查DOM类名（通用兼容，无需依赖组件实例） #

Bootstrap 5的offcanvas组件显示时会自动给根元素添加show类，隐藏时移除该类，直接判断类名是否存在即可：

const offcanvasEl = document.getElementById('offcanvas');
// 返回true为显示状态，false为隐藏状态
const isVisible = offcanvasEl.classList.contains('show');
console.log(isVisible);

方法2：调用Bootstrap官方Offcanvas实例API #

如果项目中已经初始化过Offcanvas组件，可以直接调用实例提供的官方接口判断状态：

注意：Bootstrap 5.2.0及以上版本支持公开的isShown()实例方法，更低版本可临时读取实例的_isShown私有属性（不推荐长期依赖私有属性）

const offcanvasEl = document.getElementById('offcanvas');
// 获取已初始化的Offcanvas实例
const bsOffcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl);

let isVisible = false;
if (bsOffcanvas) {
  // 5.2.0+版本用法
  isVisible = bsOffcanvas.isShown();
  // 低于5.2.0版本可替换为 isVisible = bsOffcanvas._isShown;
}
console.log(isVisible);

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