Javascript 角度2-手风琴切换类必须关闭上一个手风琴

我正在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>

SCSS

@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;
    }
}

.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。但是这可能吗？

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

IMHO最简单的解决方案是修改

函数

以“保存”单击的当前索引，如下所示：

组件：

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

toggleClass(i: number): void {
  this.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>

因此，在模板中，您只需将

[ngClass]

修改为：

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

模板：

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

toggleClass(i: number): void {
  this.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>

{{name}}
但是现在你只有一个
classActive
，所以你所有的手风琴面板都会同时打开和关闭，因为它们都是由同一个布尔值驱动的。使用
{'is-active'：classActive==1}
，
{'is-active'：classActive==2}
我这里有一个创建手风琴的演示，请看一下这个源代码。顺便说一句，它将支持折叠和手风琴：你有多个div（可能使用ngFor）？@developer033是的，手风琴与ngFor循环了4次。@Jeremythill嗯，事实并非如此。。如果单击其中一个，则仅打开该个。我应该提到手风琴是在一个ngFor循环这绝对是在正确的方向上的一步。但现在我有两个问题：1。上一个手风琴关不上。2.一旦打开手风琴，当再次单击时它将不会关闭。这似乎很奇怪，因为一旦单击新手风琴，
activeIndex
会自动获取新的
索引，因此理论上，您的
处于活动状态
类应该处理可见性，而不是？。。。不管怎样，你有演示（plunker）吗？同意，我也这么认为。我现在正在尝试设置一个plunker。至于想让它在再次单击时关闭，只要将toggleClass的内容更改为
if（this.activeIndex==I）this.activeIndex=-1；否则，这个.activeIndex=i它应该打开或关闭。嘿，伙计们，我犯了一个错误，但我现在无法解决。不过，它应该会让你对这个问题有个概念@Joobeck感谢为第二次点击关闭提供的解决方案！您应该在代码中添加一些上下文来解释为什么以及如何解决问题