使用 JS 调用时 Bootstrap 5 折叠显示/隐藏不起作用

Question

我正在尝试使用 javascript 来显示或隐藏可折叠元素，但不能同时显示或隐藏两者。（也就是说我不想启用切换）

根据文档 https://getbootstrap.com/docs/5.0/components/collapse/#via-javascript

我可以做这样的事情来触发显示和隐藏之间的切换

    var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: true
})

当然，如果我将切换更改为 false，它会阻止它执行任何操作 - 正如预期的那样。但是它还说我可以使用作为第二个数组传递的对象的显示和隐藏属性来启用/禁用这些行为

像这样

    var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false,
  show: true,
  hide: false
})

但如果我尝试使用这些选项只能切换工作

我查看了BS js，发现它确实检查了toggle的状态

if (_this._config.toggle) {
    _this.toggle();
  }

然而，显示和隐藏没有等效项，这表明 bootstrap.Collapse() 对象的显示和隐藏选项不执行任何操作。

我是否正确地认为使用 bootstrap.Collapse() 时显示和隐藏选项不起作用？

如果不是，我做错了什么。

Answer 1

toggle既是一个配置选项，也是一个方法 .toggle()

show()和hide()是方法，而不是配置选项。

因此，使用showandhide和 作为配置选项没有任何作用......

var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false,
  show: true, //useless
  hide: false //useless
})

然而，show并hide作为方法工作......

bsCollapse.show()

或者

bsCollapse.hide()

演示