Блог

Главная - Вопросы по программированию - Развернуть/свернуть все аккордеоны

Развернуть/свернуть все аккордеоны

#javascript #angular #accordion

Вопрос:

Я пытаюсь создать аккордеон, где вы можете нажимать на каждый аккордеон, но я также хотел бы иметь другую кнопку, при нажатии на которую расширяются или сворачиваются все аккордеоны.

Так что прямо сейчас у меня есть этот .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 разных аккордеонов, это будет ужасно. Кроме того, мне не нравится, что мне нужно иметь два дива, так как какая-то анимация (например, значок) не работает так хорошо таким образом.

Итак, мой вопрос: как мне сделать это «правильным» способом, чтобы не было беспорядка со многими аккордеонами, и где я действительно могу развернуть/свернуть все только одной кнопкой ?

Комментарии:

1. Вы можете использовать ngClass вместо использования двухэлементного как для переключенного, так и для не включенного состояния. <div *ngIf="!accordionAll" (click)="toogleAll(!accordionAll)" [ngClass]="{ activated: accordionAll }"></div> И дайте немного анимации с дополнительным activated классом.

2. Вам действительно следует использовать занятия, это уменьшит вашу работу.

Ответ №1:

Поскольку вы отслеживаете состояние accordionAll уже, вам не нужно передавать логическое значение методу.

 <div (click)="toggleAll()"></div> 
 toggleAll(): void { 
  this.accordionAll = !this.accordionAll
  this.accordion1 = this.accordionAll;
  this.accordion2 = this.accordionAll;
  this.accordion3 = this.accordionAll
}

Ответ №2:

Я думаю, что что — то вроде этого сработает.

 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>
Метки: