如何以编程方式折叠/展开 Bootstrap 折叠？

Question

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

例如，假设这是在 Angular 项目的 app.component.html 中。

在app.component.ts中有一个名为showMenu的变量

let showMenu: boolean;

我希望上面的 div 在 showMenu 为 false 时折叠，在 showMenu 为 true 时展开。

这可能吗？

Answer 1

我认为最好的办法是将 showMenu 变量与一个函数交换，当您更改值时可以调用该函数。我意识到这可能并不理想，所以您的另一个选择是像这样实施 ngOnChanges()：

ngOnChanges(changes) {
  if (this.showMenu) {
    $('#demo').collapse('show');
  } else {
    $('#demo').collapse('hide');
  }
}

记得也将 ngOnChanges 导入并添加到您的 class。

Answer 2

使用如下所示的 ngClass 来达到预期的效果。

<div id="demo" class="collapse" [ngClass]="{'show': showMenu}">
    Lorem ipsum dolor text....
</div>

崩溃实际上是 adding/removing show' class 内部到 hide/show 元素。您可以像上面那样使用 angular 来做同样的事情。

Answer 3

寻找我得到的相同答案：

ngOnChanges(changes) {
   $('#demo').collapse('toggle');
}

尽情享受吧！

How to Collapse / Expand a Bootstrap Collapse programmatically?