如何以编程方式折叠/展开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

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

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

折叠实际上是在内部添加/删除“ show”类以隐藏/显示元素。您可以使用上述的角度进行相同的操作。

Answer 2

我相信最好的选择是将showMenu变量与一个更改值时可以调用的函数交换。 我意识到这可能并不理想，因此您的另一种选择是像这样实现ngOnChanges()：

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

请记住也要导入ngOnChanges并将其添加到您的类中。