angular - 当另一个 Accordion 打开时关闭另一个 Accordion

Question

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

我尝试将“active”之类的自定义类附加到关闭的 Accordion 上。 Accordion 的内容来自 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>

我预计当另一个 Accordion 打开时，一个 Accordion 会关闭，但实际输出是当我打开另一个 Accordion 时，前一个 Accordion 不会关闭

Answer 1

我可以提出的建议是:

尝试从 typescript 末尾添加一个变量，默认值=您想要默认打开的 Accordion 的索引

currentAccordionindex = 0

然后应用您提到的“事件”类(我希望在 Accordion 的打开和关闭状态之间切换)，例如:

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

使用 Accordion 上的(单击)事件更新 currentAccordionindex 的此值。