多个项目的点击事件的角度

Question

我想做什么：

我正在尝试在页面上放置可折叠的手风琴样式项目，该项目将在单击事件时展开和折叠。当添加某个类时它们会扩展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>

Answer 2

Try to pass unique Id. (little modification)Ex: -

in component.ts file: 
selectedFeature: any;
categories:any[] = [
        {
          id: "collapseOne",
          heading_id: "headingOne",
        },
        {
          id: "collapseTwo",
          heading_id: "headingTwo",
        },
        {
          id: "collapseThree",
          heading_id: "headingThree",
        }
];

toggleClass(category) {
this.selectedFeature = category;
};

ngOnInit() {
this.selectedFeature = categories[0]
  }

in html:-

<div class="collapsible-panel" *ngFor="let category of categories">
<!-- here you can check the condition and use it:-
ex:
<h4 class="heading" [ngClass]="{'active': selectedFeature.id==category.id}" (click)="toggleClass(category)">
<p class="your choice" *ngIf="selectedFeature.id==category.id" innerHtml={{category.heading}}></p>

   enter code here

 -->
.....
</div>

Answer 3

尝试维护扩展项目的数组。

expanded = []; // take array of boolean 
toggleClass(id: number) {
    this.expanded[i] = !this.expanded[i];
    console.log(this.expanded[i]);
}

Answer 4

您的解决方案是使用模板局部变量：

看到这个：https://stackoverflow.com/a/38582320/3634274

Answer 5

您使用相同的属性expanded 来切换所有 div，因此当您为一个 div 设置为 true 时，它​​会为所有 div 设置为 true。

尝试像这样设置不同的属性：

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

TS：

expanded1 = false;
expanded2 = false;

toggleClass(number:any) {
    this["expanded" + number]  = !this["expanded" + number];
    console.log(this["expanded" + number]) 
}