Question

我尝试了一种自定义手风琴，其中第一个默认情况下是在页面加载时打开的。共有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>

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

Answer 1

我可以提出的建议是：

尝试从打字稿结尾添加一个默认值为要默认打开的手风琴的索引

currentAccordionindex = 0

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

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

使用手风琴上的（单击）事件将currentAccordionindex的值更新。

Answer 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

打开另一只手风琴就关闭

2 个答案: