如何在Bootstrap 5中通过代码控制Offcanvas的显示与隐藏

问题根源 #

你混淆了Bootstrap的Collapse折叠组件和Offcanvas侧边栏组件的API，Offcanvas有专属的JS控制方法，不能用collapse()来操作，这是导致所有异常的核心原因。

正确的代码控制方式 #

Bootstrap Offcanvas提供了对应的JS方法，直接调用即可，无需手动修改类或样式：

1. 初始显示Offcanvas
   原生JS写法：

   const offcanvasElement = document.getElementById('select');
   const offcanvasInstance = new bootstrap.Offcanvas(offcanvasElement);
   offcanvasInstance.show();
   

   jQuery写法：

   $('#select').offcanvas('show');
   

2. 切换显示/隐藏状态
   jQuery写法：

   $('#select').offcanvas('toggle');
   

   原生JS写法：

   offcanvasInstance.toggle();
   

3. 隐藏Offcanvas
   jQuery写法：

   $('#select').offcanvas('hide');
   

   原生JS写法：

   offcanvasInstance.hide();
   

为什么之前的操作会出问题 #

• 用$('#select').collapse('show')无效：这个方法是给Collapse组件设计的，Offcanvas不识别该方法，自然没有效果。
• 点击A标签后用toggle报错：A标签的data-bs-toggle="offcanvas"已经自动初始化了Offcanvas实例，你再调用collapse('toggle')会试图给同一个元素绑定Collapse实例，Bootstrap不允许同一元素绑定多个不同组件的实例，因此抛出冲突错误。
• 手动加show类和visibility: visible：直接修改DOM类没有触发Bootstrap Offcanvas的内部状态同步，组件自身认为还是隐藏状态，所以第一次点击按钮时，组件会执行“显示”操作（与当前DOM状态冲突），第二次才会执行“隐藏”，导致交互异常。

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