javascript - 多个项目的 Angular 点击事件

Question

我想做的事情:

我试图在页面上放置可折叠的 Accordion 样式项目，该项目将在单击事件时展开和折叠。当添加某个类时，它们会展开 collapsible-panel--expanded。

我如何努力实现它:

在每个项目上我都设置了一个点击事件，如下所示:

<div (click)="toggleClass()" [class.collapsible-panel--expanded]="expanded" class="collapsible-panel" *ngFor="let category of categories">
    ....
</div>
<div (click)="toggleClass()" [class.collapsible-panel--expanded]="expanded" class="collapsible-panel" *ngFor="let category of categories">
    ....
</div>

在函数toggleClass()中我有以下内容:

expanded = false;
toggleClass() {
    this.expanded = !this.expanded;
    console.log(this.expanded)

}

我面临的问题:

当我在同一页面上有多个这样的内容并单击其中一个时，它们似乎都会展开。

我无法扩展。

编辑:

可折叠链接的数量是动态的，并且会在生成和从数据库中提取时发生变化。今天可能是一个链接，明天可能是 30 个链接等等...因此设置像 expanded 1 或 expanded 2 这样的变量名称是不可行的

编辑2:

好的，点击处理程序的完整代码如下所示:

toggleClass(event) {
    event.stopPropagation();
    const className = 'collapsible-panel--expanded';
    if (event.target.classList.contains(className)) {
        event.target.classList.remove(className);
        console.log("contains class, remove it")
    } else {
        event.target.classList.add(className);
        console.log("Does not contain class, add it")
    }

}

HTML 中的代码如下:

<div (click)="toggleClass($event)" class="collapsible-panel" *ngFor="let category of categories" >
  <h3 class="collapsible-panel__title">{{ category }}</h3>
  <ul class="button-list button-list--small collapsible-panel__content">
      <div *ngFor="let resource of resources | resInCat : category">
          <a href="{{ resource.fields.resource.fields.file.url }}" target="_blank" class="button-list__inner no-decoration doc"><span class="underline display-block margin-bottom">{{ resource.fields.title }}</span><span class="secondary" *ngIf="resource.fields.description display-block">{{ resource.fields.description }}</span></a>
      </div>
  </ul>
</div>

Answer 1

你可以通过 javascript 应用你的类

<div (click)="handleClick($event)">
    some content
</div>

然后是你的处理程序

handleClick(event) {
    const className = 'collapsible-panel--expanded';
    if (event.target.classList.contains(className)) {
        event.target.classList.remove(className);
    } else {
        event.target.classList.add(className);
    }
}

在纯 html 和 js 中，可以这样完成

function handleClick(event) {
    const className = 'collapsible-panel--expanded';
    if (event.target.classList.contains(className)) {
        event.target.classList.remove(className);
    } else {
        event.target.classList.add(className);
    }
    console.log(event.target.classList.value);
}

<div onclick="handleClick(event)">
some content
</div>