以编程方式切换 Bootstrap 5 折叠组件

Question

我正在使用 boostrap 5“崩溃”，使用数据属性方法。它按预期工作。我可以单击按钮来折叠/展开可折叠项目。

文档指出我可以手动切换状态，如下所示：

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

然而，这失败了，因为getInstancereturn null。

奇怪的是，如果我单击折叠按钮，然后使用该代码，它就会起作用。

如何确保代码在不首先“启动”折叠组件的情况下正常工作？

Answer 1

我认为使用数据属性时，引导组件仅根据需要创建 - 即第一次单击折叠按钮时。这可以解释我上面提到的行为。

所以解决方案是使用getOrCreateInstance：

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