Bootstrap 5 崩溃 show/hide 用 JS 调用时不工作

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，它就会停止执行任何操作 - 正如预期的那样。但是它还说我可以在作为第二个数组传递给enable/disable这些行为

的对象上使用显示和隐藏属性

像这样

    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 既是 config option, and a method .toggle()

show() 和 hide() 是 methods，不是配置选项。

因此，使用 show 和 hide 以及作为配置选项什么都不做...

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

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

bsCollapse.show()

或

bsCollapse.hide()

Demo

Answer 2

如果你想切换collaspe :

new bootstrap.Collapse(myCollapse, {
  toggle: true
});

- 切换选项必须为真。

=> 在调用实例构造函数时切换可折叠元素。

- 无需将变量指向折叠实例。

如果要显示或隐藏折叠：

var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

bsCollapse.show();

or

bsCollapse.hide();

- 切换选项必须为 false。

Bootstrap 5 崩溃 show/hide 用 JS 调用时不工作

Bootstrap 5 collapse show/hide not working when invoked with JS

javascript

twitter-bootstrap

bootstrap-5