[英]Collapsible accordion in angular
我正在制作手风琴以在 angular 应用程序中使用 javascript 制作可折叠的 div ..
为此,如果单击“ Parent One
或任何其他父名称上的按钮未打开。
网址:
<div *ngFor="let item of data">
<button class="accordion"> {{item.parentName}} </button>
<div class="panel" *ngFor="let child of item.childProperties">
<p> {{child.propertyName}} </p>
</div>
</div>
TS:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data: any =
[
{
"parentName": "Parent One",
"childProperties":
[
{ "propertyName": "Property One" },
{ "propertyName": "Property Two" }
]
},
{
"parentName": "Parent Two",
"childProperties":
[
{ "propertyName": "Property Three" },
{ "propertyName": "Property Four" },
{ "propertyName": "Property Five" },
]
},
{
"parentName": "Parent Three",
"childProperties":
[
{ "propertyName": "Property Six" },
{ "propertyName": "Property Seven" },
{ "propertyName": "Property Eight" },
]
}
]
ngOnInit() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
}
}
注意:由于我是 angular 新手,我正在使用 javascript 方式制作它。所以请帮助我使用纯 angular 和 typescript实现结果..
工作stackblitz https://stackblitz.com/edit/angular-lp3riw
您可以在演示中看到父按钮是可见的,但是如果您单击该按钮,它不会被展开..
还列出了下面带有静态值的工作可折叠按钮..
如何使用 angular 和 typescript 方式(没有任何第三方或 jquery)制作可折叠的手风琴,就像给定的 stackblitz 静态值一样。
将您的功能保留在ngAfterViewInit
而不是ngOnInit
。 查看更新的堆栈闪电战
问题是在 ngOnInit 上,视图没有完全绘制,并且您没有获得要绑定函数的所有元素。
ngAfterViewInit() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
}
使用 angular执行如下所示。
在按钮上保留一个点击函数,并将属性isActive
绑定到相应的数组元素。 然后根据 isActive 的值是否为真/假来显示/隐藏手风琴。
<div *ngFor="let item of data;let i = index;">
<button class="accordion" (click)="toggleAccordian($event, i)"> {{item.parentName}} </button>
<div class="panel" *ngFor="let child of item.childProperties" hide="!item.isActive">
<p> {{child.propertyName}} </p>
</div>
</div>
toggleAccordian(event, index) {
var element = event.target;
element.classList.toggle("active");
if(this.data[index].isActive) {
this.data[index].isActive = false;
} else {
this.data[index].isActive = true;
}
var panel = element.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
Stackblitz 更新仅显示 childProperties Item 中的第一个元素,因此如果您在 p 标签上应用 *ngFor,您将获得 childProperties 的所有元素
<p *ngFor="let child of item.childProperties"> {{child.propertyName}} </p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.