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

sbtkgmzw 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(154)

我正在使用一个bootstrap 5“collapse”，使用数据属性方法。它按预期工作。我可以单击按钮来折叠/展开可折叠的项目。
docs状态我可以手动切换状态，如下所示：

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

但是，由于getInstance返回null，因此该操作失败。
奇怪的是，如果我点击折叠按钮，然后使用那个代码，它就起作用了。
如何确保代码在不首先“启动”折叠组件的情况下正常工作？

1条答案

我认为当使用数据属性时，引导组件只在需要时创建--也就是说，当第一次点击折叠按钮时。这可以解释我上面提到的行为。
因此，解决方案是改用getOrCreateInstance：

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