javascript - Angular 2 - Accordion 切换类必须关闭前一个 Accordion

Question

我正在 Angular 2 中构建一个 Accordion ，我想要完成的是，当我单击其中一个 Accordion 时， Accordion 将打开，所有其他打开的 Accordion 将关闭(所以基本上之前打开的 Accordion 将是关闭)。没有 DOM 操作。

我现在是如何做到这一点的:我有一个名为“classActive”的类型 bool 值，我可以在单击时切换 true 或 false。

(注意: Accordion 是通过使用 ngFor 循环的)

HTML

<div class="accordion" [ngClass]="{'is-active' : classActive}">
    <div class="accordion__container">
        <div class="accordion__header" (click)="toggleClass($event)">
            <h2 class="accordion__heading">{{ name }}</h2>
        </div>
        <div class="accordion__content">
            {{ content }}
        </div>
    </div>
</div>

JS

@Component({
    selector: 'accordion',
    templateUrl: './accordion.component.html',
    styleUrls: ['./accordion.component.scss']
})
export class AccordionComponent implements OnInit {
    classActive: boolean = false;

    toggleClass(event) {
        event.preventDefault();
        this.classActive = !this.classActive;
    }
}

SCSS

.accordion {
    height: 100px;
    overflow: hidden;
    transition: height .3s cubic-bezier(1, 0, .41, 1.01);

    &.is-active {
        height: 200px;

        .accordion__content {
            opacity: 1;
        }
    }

    &__header {
        cursor: pointer;
        height: 100px;
        padding: 0 $p-container;
        position: relative;
    }

    &__heading {
        text-transform: lowercase;
        line-height: 100px;
        pointer-events: none;
    }

    &__content {
        opacity: 0;
        transition: opacity .6s;
        padding: $p-container;
    }
}

我认为解决方案是将所有“classActive”设置为 false，然后将单击的设置为 true。但这可能吗？

Answer 1

正如评论中提到的，问题在于您创建了一个变量来处理多个元素。

恕我直言，最简单的解决方案是修改您的函数以“保存”当前单击的索引，如下所示:

组件:

activeIndex: number = 0; // The accordion at index 0 will be open by default

toggleClass(i: number): void {
  this.activeIndex = i;
}

因此，在您的模板中，您只需将 [ngClass] 修改为:

[ngClass]="{'is-active': activeIndex === i}"

模板:

<div *ngFor="let yourVariable of yourArray, let i = index">
  <div class="accordion" [ngClass]="{'is-active': activeIndex === i}">
    <div class="mood__container">
      <div class="mood__header" (click)="toggleClass(i)">
        <h2 class="mood__heading">{{ name }}</h2>
      </div>
      <div class="accordion__container>
        {{ content }}
      </div>
    </div>
  </div>
</div>

查看下面的完整代码:

DEMO