时间戳

首页 > 解决方案 > 使用 JS 调用时，Bootstrap 5 折叠显示/隐藏不起作用

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

问题描述

我正在尝试使用 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，发现它确实检查了切换的状态

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

但是，显示和隐藏没有等效项，这向我表明 bootstrap.Collapse() 对象的显示和隐藏选项什么都不做。

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

如果没有，我做错了什么。

标签： javascripttwitter-bootstrapbootstrap-5

解决方案

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()

演示

推荐阅读