Bootstrap 5中Collapse的getOrCreateInstance为何会立即切换元素？

问题原因 #

调用getOrCreateInstance时元素可见性自动切换，是因为Bootstrap 5 Collapse在创建新实例时，默认初始化选项中的toggle参数为true——这个参数控制实例创建完成后是否自动切换一次元素的可见状态。你的代码没有覆盖这个默认值，所以实例创建时就触发了状态切换。

修正方案 #

在调用getOrCreateInstance时，传入{ toggle: false }的配置选项，就能在不改变元素初始状态的前提下获取或创建实例：

修正后的JavaScript代码

const details = document.getElementById("details");
// 传入toggle: false，禁止初始化时自动切换状态
const detailsCollapse = bootstrap.Collapse.getOrCreateInstance(details, { toggle: false });

const btn = document.getElementById("toggleDetails");
btn.addEventListener("click", (e) => {
    detailsCollapse.toggle();
});

效果说明 #

这样修改后，页面加载时可折叠元素会保持初始的隐藏状态，只有点击按钮时才会触发toggle()方法切换可见性，完全符合需求。

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