Angular手风琴组件支持一键展开/收起全部的优化实现咨询

核心思路是用数组统一管理所有手风琴的状态，通过复用方法替代零散的变量操作，同时仅用一个按钮实现全量切换。 #

1. 重构TS组件代码 #

删除零散的accordion1/2/3变量，改用布尔数组统一存储所有手风琴的展开状态，新增全量切换、单个切换的复用方法：

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

@Component({
  selector: 'app-faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.scss'],
})
export class FaqComponent implements OnInit {
  // 按顺序存储所有手风琴的展开状态，有多少个手风琴就加多少个初始值
  accordionStates: boolean[] = [false, false, false];
  // 全展/全收状态标识
  isAllExpanded: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  // 全展/全收切换方法
  toggleAll(): void {
    this.isAllExpanded = !this.isAllExpanded;
    // 批量更新所有手风琴状态
    this.accordionStates = this.accordionStates.map(() => this.isAllExpanded);
  }

  // 单个手风琴切换方法
  toggleSingle(index: number): void {
    this.accordionStates[index] = !this.accordionStates[index];
    // 同步更新全选状态：所有手风琴都展开时isAllExpanded自动为true，否则为false
    this.isAllExpanded = this.accordionStates.every(state => state === true);
  }
}

2. 改写单个手风琴的触发逻辑 #

如果是固定数量的手风琴，只需给每个手风琴传入对应索引即可：

<!-- 第一个手风琴对应索引0 -->
<div class="accordion-header" (click)="toggleSingle(0)" [ngClass]="accordionStates[0] ? 'is-active' : ''">Accordion 1</div>
<!-- 第二个手风琴对应索引1 -->
<div class="accordion-header" (click)="toggleSingle(1)" [ngClass]="accordionStates[1] ? 'is-active' : ''">Accordion 2</div>
<!-- 第三个手风琴对应索引2 -->
<div class="accordion-header" (click)="toggleSingle(2)" [ngClass]="accordionStates[2] ? 'is-active' : ''">Accordion 3</div>

如果手风琴是从接口获取的动态列表，直接用*ngFor遍历渲染即可，无需手动写每个手风琴的代码：

<div 
  *ngFor="let item of faqList; let i = index"
  class="accordion-header" 
  (click)="toggleSingle(i)" 
  [ngClass]="accordionStates[i] ? 'is-active' : ''"
>
  {{item.title}}
</div>

3. 单个全展/全收按钮实现 #

仅需一个按钮，直接绑定toggleAll方法，可基于isAllExpanded状态切换按钮文本、图标，方便加动画效果：

<button class="toggle-all-btn" (click)="toggleAll()">
  <!-- 可替换为图标组件，直接用isAllExpanded控制动画状态 -->
  {{ isAllExpanded ? '收起全部' : '展开全部' }}
</button>

优化效果 #

• 手风琴数量增加时，只需修改accordionStates的初始值长度即可，无需新增零散变量，20个手风琴也不会出现冗余代码
• 仅用一个按钮实现全量切换，状态统一绑定isAllExpanded，直接基于该状态加CSS动画即可实现图标旋转等交互效果
• 自动同步单个切换和全选状态：手动把所有手风琴点开时，全选按钮会自动变成「收起全部」状态，反之亦然

内容的提问来源于stack exchange，提问作者Denver Dang