所有手风琴面板都同时打开吗？

Question

我正在尝试从Angular中重新创建一个手风琴。

我具有一个面板打开和关闭的功能，但是当我介绍一个以上面板时，我发现它们都可以一次打开。

我缺少什么吗？

这里是stackblitz要玩

component.ts

export class AppComponent  {
  collapsed = true;

  toggle(el) {
    this.collapsed = !this.collapsed;
  }
}

component.html

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

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

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
}

Answer 1

它们全部折叠（或不折叠），具体取决于collapsed变量。

我将考虑使用*ngFor循环这样的不同的创意手风琴：

component.ts

export class AppComponent  {
  public accordions = [
{
title: 'Some title',
data: 'Some data',
collapsed: true
},
{
title: 'Some title2',
data: 'Some data2',
collapsed: true
}
]

  toggle(el) {
    this.accordions[el].collapsed = !this.accordions[el].collapsed;
  }
}

component.html

<div *ngFor="let accordion of accordions; let i = index">
    <div class="header"
      [ngClass]="{'upArr open': !accordion.collapsed, 'downArr': collapsed}" 
      (click)="toggle(i)">
        {accordion.title}
    </div>
    <div class="body" [ngClass]="accordions[i].collapsed? 'colapsed' : ''">
      {accordion.data}
    </div>
</div>

Answer 2

请将此代码替换为您的代码。

export class AppComponent  {
  public accordions = [
    {
      title: 'head1',
      data: 'content 1 ',
      collapsed: false
    },
    {
      title: 'head2',
      data: 'content 2',
      collapsed: true
    }
  ]

  toggle(el) {
    this.accordions[el].collapsed = !this.accordions[el].collapsed;
  }
}


<div *ngFor="let accordion of accordions; let i = index">
    <div class="header" [ngClass]="{'upArr open': !accordion.collapsed, 'downArr': collapsed}" 
      (click)="toggle(i)">
        {{accordion.title}}
    </div>
    <div class="body" [ngClass]="accordions[i].collapsed? 'collapsed' : ''">
      {{accordion.data}}
    </div>
</div>