多个项目的角度单击事件 [英] Angular on click event for multiple items

问题描述

我试图在页面上放置可折叠的手风琴样式项，以便在单击事件时将其展开和折叠.当添加特定的类collapsible-panel--expanded时，它们将扩展.

I am trying to have collapsible accordion style items on a page which will expand and collapse on a click event. They will expand when a certain class is added collapsible-panel--expanded.

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

On each of the items I have set a click event like so:

<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()中，我具有以下内容:

and in the function toggleClass() I have the following:

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

}

面临的问题:

当我在同一页面上有多个此选项并单击一个时，它们似乎都在扩展.

The issue im facing:

When I have multiple of this on the same page and I click one, they all seem to expand.

我看不到要扩展的东西.

I cannot seen to get one to expand.

可折叠链接的数量将是动态的，并且会随着生成和从数据库中拉出而改变.今天可能是一个链接，明天可能是30个链接，等等……因此设置变量名称如expanded 1或expanded 2将不可行

The amount of collapsible links will be dynamic and will change as they are generated and pulled from the database. It could be one link today but 30 tomorrow etc... so having set variable names like expanded 1 or expanded 2 will not be viable

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

Ok, so the full code for the click handler is like so:

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中的代码如下:

and the code in the HTML is like so:

<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>

推荐答案

您可以通过javascript应用课程

you could apply your class through 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中，可以这样完成

In plain html and js it could be done like this

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>

这篇关于多个项目的角度单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！