javascript — Все панели аккордеона открываются одновременно?

Все аккордеонные панели открываются одновременно?

Я пытаюсь создать аккордеон с нуля в Angular.

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

Есть ли что-то, что мне не хватает?

Вот стек, чтобы играть с

component.ts

 export class AppComponent { collapsed = true; toggle(el) { this.collapsed = !this.collapsed; } } 

component.html

 {amp}lt;div class="header" [ngClass]="{'upArr open': !collapsed, 'downArr': collapsed}" (click)="toggle(this)"{amp}gt; title {amp}lt;/div{amp}gt; {amp}lt;div class="body" [ngClass]="{'collapsed': collapsed}"{amp}gt; data {amp}lt;/div{amp}gt; {amp}lt;div class="header" [ngClass]="{'upArr open': !collapsed, 'downArr': collapsed}" (click)="toggle(this)"{amp}gt; title {amp}lt;/div{amp}gt; {amp}lt;div class="body" [ngClass]="{'collapsed': collapsed}"{amp}gt; data {amp}lt;/div{amp}gt; 

component.css

 .header { background: #CB1C6F; cursor: pointer; width: 100%; font-size: 2em; color: white; } .header:hover { background: #7F045D; } .upArr::after { float: right; content: '25b2'; } .downArr::after { float: right; content: '25bc'; } .body { background: lightblue; overflow: hidden; width: 100%; } .collapsed { height: 0px; } .open { background: #00A1CC } .open:hover { background: #005DA1 } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector