Expand/collapse 所有手风琴

Question

我正在尝试创建一个手风琴，您可以在其中单击每个手风琴，但我还想要另一个按钮，单击该按钮可展开或折叠所有手风琴。

所以现在我有这个 .ts 组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.scss'],

})
export class FaqComponent implements OnInit {

  accordion1: boolean;
  accordion2: boolean;
  accordion3: boolean;
  accordionAll: boolean;

  constructor() { }

  ngOnInit() {
  }

}

现在，每个手风琴只是一些 CSS，然后我可以激活每个手风琴：

<div class="accordion-header" (click)="accordion1 = !accordion1" [ngClass]="accordion1 ? 'is-active' : ''">Accordion 1</div>

然后我可以给它一些样式并激活一些具有特定 accordion1 状态的手风琴内容。

对于 expand/collapse 所有我目前有这样的东西：

<div *ngIf="!accordionAll" (click)="accordion1 = true; accordion2 = true; accordion3 = true; accordionAll = true"></div>
<div *ngIf="accordionAll" (click)="accordion1 = false; accordion2 = false; accordion3 = false; accordionAll = false"></div>

现在，从某种意义上说，这是可行的。但如果我突然有 20 种不同的手风琴，那就太可怕了。另外，我不喜欢我需要两个 div，因为某种动画（例如图标）不能以这种方式很好地工作。

所以我的问题是：我如何以“正确”的方式做到这一点，它不会弄乱许多手风琴，而且我实际上只用一个按钮就可以做到 expand/collapse ？

Answer 1

我认为这样的事情会奏效。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.scss'],

})
export class FaqComponent implements OnInit {

  accordion1: boolean;
  accordion2: boolean;
  accordion3: boolean;
  accordionAll: boolean;

  constructor() { }

  ngOnInit() {
  }

  toogleAll() {
     this.accordion1 = this.accordionAll;
     this.accordion2 = this.accordionAll;
     this.accordion3 = this.accordionAll;

     this.accordionAll = !this.accordionAll;
  }

}

<div *ngIf="!accordionAll" (click)="toogleAll()"></div>
<div *ngIf="accordionAll" (click)="toogleAll()"></div>

Answer 2

由于您已经在跟踪 accordionAll 的状态，因此您不需要将布尔值传递给方法。

<div (click)="toggleAll()"></div>

toggleAll(): void { 
  this.accordionAll = !this.accordionAll
  this.accordion1 = this.accordionAll;
  this.accordion2 = this.accordionAll;
  this.accordion3 = this.accordionAll
}

Expand/collapse 所有手风琴

Expand/collapse all accordions

javascript

accordion

angular