时间戳

首页 > 解决方案 > 展开/折叠所有手风琴

javascript - 展开/折叠所有手风琴

问题描述

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

所以现在我有这个.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状态的手风琴内容。

对于展开/折叠，我目前有这样的东西：

<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，因为某种动画（例如图标）以这种方式不能很好地工作。

所以我的问题是：我如何以“正确”的方式做到这一点，它不会与许多手风琴混在一起，并且我实际上可以只用一个按钮进行展开/折叠？

标签： javascriptangularaccordion

解决方案

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

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>

推荐阅读