如何以編程方式折疊/展開 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並將其添加到您的類中。

Answer 3

尋找相同的答案我得到了這個：

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

享受！