如何无需预先触发即可程序化切换Bootstrap 5 Collapse组件？

问题原因 #

用数据属性（比如data-bs-toggle、data-bs-target）实现的Collapse组件，Bootstrap默认只会在**第一次用户交互（如点击折叠按钮）**时才会完成实例化。所以你在交互前调用getInstance，自然拿不到已创建的实例，返回null。

解决方案 #

方法1：使用getOrCreateInstance方法（推荐）

Bootstrap 5提供了getOrCreateInstance工具方法，它会自动检查目标元素是否已有Collapse实例：如果有就返回现有实例，没有则直接创建新实例。这样无需预先触发按钮，就能直接调用toggle方法：

let element = document.querySelector('#my-collapse');
bootstrap.Collapse.getOrCreateInstance(element).toggle();

方法2：手动检查并初始化实例

如果你想更明确地控制初始化过程，可以先检查实例是否存在，不存在则手动创建：

let element = document.querySelector('#my-collapse');
let collapseInstance = bootstrap.Collapse.getInstance(element);
// 实例不存在则手动初始化，可传入配置项（比如默认状态）
if (!collapseInstance) {
  collapseInstance = new bootstrap.Collapse(element, {
    // 可选配置：比如设置默认是否展开，false为默认折叠，true为默认展开
    // show: false
  });
}
collapseInstance.toggle();

额外说明 #

如果你的Collapse元素是动态添加到DOM中的（比如通过JS生成插入），必须用上述两种方法手动处理实例，因为Bootstrap的自动初始化仅在页面初始加载时处理已存在的DOM元素。

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