当另一个手风琴打开时关闭一个手风琴答案

【问题标题】：Close one accordion when another is open当另一个手风琴打开时关闭一个手风琴
【发布时间】：2019-01-21 03:54:48
【问题描述】：

我尝试了一个自定义手风琴，其中第一个手风琴默认在页面加载时打开。共有 3 个手风琴。当另一个手风琴打开时，我必须关闭手风琴。

我尝试过给关闭的手风琴添加一个像“active”这样的自定义类。手风琴的内容来自 API

      <div class="card-accordion">
        <div
          class="card"
          *ngFor="let q of popUpContent?.questions; let i = index"
        >
          <div
            class="card-header"
            id="headingOne"
            type="button"
            data-toggle="collapse"
            [attr.data-target]="'#collapse' + i"
            [attr.aria-expanded]="i == 0 ? true : false"
            aria-controls="collapseOne"
          >
          </div>

          <div
            id="collapse{{ i }}"
            class="collapse"
            [ngClass]="{ in: i == 0 }"
            aria-labelledby="headingOne"
            data-parent="#accordionExample"
          >
            <div class="card-body">{{ q.description }}</div>
          </div>
        </div>
      </div>

我希望一个手风琴在另一个手风琴打开时关闭，但实际输出是当我打开另一个手风琴时，前一个手风琴没有关闭

【问题讨论】：

这里有很多代码。您能否删除与手风琴的开闭动作无关的代码？这将有助于我们更好地了解您的问题。
我已经更新了代码请检查
你也没有完成你的最后一句话。不过，我已经发布了用于实现所需功能的解决方案。

标签： angular typescript

【解决方案1】：

我能提出的建议是：

尝试从 typescript 末尾添加一个变量，默认值 = 您希望默认打开的手风琴索引

currentAccordionindex = 0

然后应用您提到的“活动”类（我希望在手风琴的打开和关闭状态之间切换），例如：

[ngClass]="currentAccordionindex === i ? 'active':'' "

使用手风琴上的 (click) 事件更新 currentAccordionindex 的值。

【讨论】：

感谢您的努力，但似乎没有按预期工作

【解决方案2】：

使用*ngIf 的简单手风琴解决方案。您可以使用<div> 标签代替下面模板代码中的所有自定义选择器，但我建议不要这样做，因为它不利于代码的可理解性。

accordion.component.ts

class AccordionComponent {
  activeAccordion = 'One'

  isActive = (name: string) => this.activeAccordion === name

  setActive = (name: string) => this.activeAccordion = name
}

accordion.component.html

  <accordion-item title="Accordion One" [ngClass]="{ 'active': isActive('One') }" (click)="setActive('One')" >  
    <accordion-content *ngIf="isActive('One')"> ... </accordion-content>
  </accordion-item>

  <accordion-item title="Accordion Two" [ngClass]="{ 'active': isActive('Two') }" (click)="setActive('Two')" >
    <accordion-content *ngIf="isActive('Two')"> ... </accordion-content>
  </accordion-item>

  <accordion-item title="Accordion Three" [ngClass]="{ 'active': isActive('Three') }" (click)="setActive('Three')" >
    <accordion-content *ngIf="isActive('Three')"> ... </accordion-content>
  </accordion-item>

StackBlitz 上的工作解决方案：https://stackblitz.com/edit/angular-b57ybp

【讨论】：

感谢您的努力，但在我的情况下不起作用