Angular 2 - 手风琴开关 class 必须关闭上一个手风琴

Question

我正在 Angular 2 中构建手风琴，我想要完成的是当我单击其中一个手风琴时，手风琴将打开，所有其他打开的手风琴将关闭（所以基本上先前打开的手风琴将被关闭）。没有 DOM 操纵。

我现在是怎么做的：我有一个名为 'classActive' 的布尔类型，我在点击时切换为 true 或 false。

（注意：手风琴正在使用 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

如评论中所述，问题是您创建了一个变量来处理多个元素。

恕我直言，最简单的解决方案是将您的 function 修改为 "save" 当前点击的索引，如下所示：

分量：

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

Answer 2

[ngClass]="{'is-active' : activeIndex === i, 'is-dactive' : activeIndex != i}">

togglePopover(event, i: number) {
    event.preventDefault();
    this.activeIndex = i
    console.log(this.activeIndex);
  }

Angular 2 - 手风琴开关 class 必须关闭上一个手风琴

Angular 2 - Accordion toggle class must close previous accordion

javascript

accordion

toggle

angular