Bootstrap 5 设置：点击按钮仅打开Offcanvas，再次点击不关闭

要实现点击按钮只打开Offcanvas（已打开时点击不触发关闭），需要放弃默认的data-bs-toggle自动切换行为，改用JavaScript手动控制状态：

步骤1：修改按钮代码 #

移除按钮上的data-bs-toggle="offcanvas"属性，给按钮添加唯一ID方便JS选择：

<button id="openCartOffcanvas" role="button">Add to Cart</button>

步骤2：添加JavaScript控制逻辑 #

利用Bootstrap 5的Offcanvas API，监听按钮点击事件，仅在Offcanvas处于关闭状态时触发打开操作：

// 获取按钮和Offcanvas元素
const openBtn = document.getElementById('openCartOffcanvas');
const offcanvasEl = document.getElementById('offcanvas');
// 初始化Offcanvas实例
const offcanvas = new bootstrap.Offcanvas(offcanvasEl);

// 绑定点击事件
openBtn.addEventListener('click', function() {
  // 两种判断方式选其一即可
  // 方式1：通过元素类名判断（Bootstrap打开Offcanvas时会添加"show"类）
  if (!offcanvasEl.classList.contains('show')) {
    offcanvas.show();
  }

  // 方式2：用Offcanvas实例的内置方法判断状态
  // if (!offcanvas.isShown()) {
  //   offcanvas.show();
  // }
});

原理说明 #

默认的data-bs-toggle="offcanvas"会触发Bootstrap内置的切换逻辑（点击一次开，再点一次关）。我们通过手动实例化Offcanvas并判断当前状态，只在关闭时调用show()方法，就实现了点击按钮仅打开不关闭的效果。

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