Как свернуть / развернуть Bootstrap Collapse программно?

Question

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

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

Например, представьте, что это в app.component.html в проекте Angular.

В app.component.ts * есть переменная showMenu1007 *

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 в свой класс.