如何通过JavaScript初始化Bootstrap 4.6 collapse折叠组件

问题1解决方法 #

你之前的测试没有生效，核心原因是仅初始化了折叠容器本身，没有给触发按钮绑定对应的点击交互逻辑。不需要data-toggle属性的实现代码如下：

// 初始化折叠容器，toggle设为false避免初始化时自动切换状态
$("#demo").collapse({
  toggle: false
})
// 给触发按钮绑定点击事件，控制折叠容器切换状态
$("#mybtn").on("click", function() {
  $("#demo").collapse("toggle")
})

保留data-target的前提下，上面的代码即可正常实现折叠功能。如果不需要data-target，也可以直接在JS逻辑中硬编码目标容器，省去属性声明。

问题2参数说明 #

初始化传入的配置对象用于定义折叠组件的初始化行为，其中toggle配置项仅接受布尔值，不支持传入{toggle: "collapse"}这类字符串参数，二者的区别如下：

• {toggle: true}：初始化组件的同时，自动触发一次状态切换（初始为隐藏则展开，初始为展开则隐藏）
• {toggle: false}：仅完成组件的功能注册，不改变容器当前的折叠/展开状态，也是绝大多数场景下的默认选择

注意：不要把初始化配置的toggle参数和方法调用搞混，当你给collapse()方法传入字符串参数时（比如collapse("toggle")、collapse("show")），属于调用组件的公开方法，和初始化配置是完全不同的逻辑。

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