可折叠的手风琴 [英] Collapsible accordion in angular
问题描述
我正在制作手风琴，以便在角度应用程序中使用javascript来制作可折叠的div。
为此，如果未打开，请单击<$ c上的按钮$ c>父母一方或其他任何父母的姓名。
HTML ：
< div * ngFor =让数据项>
< button class = accordion> {{item.parentName}}< / button>
< div class = panel * ngFor =让item.childProperties的子级>
< p> {{child.propertyName}}< / p>
< / div>
< / div>
Ts ：
从'@ angular / core'导入{Component，OnInit};
@Component（{
选择器：'my-app'，
templateUrl：'./app.component.html'，
styleUrls：['./ app.component.css']
}）
出口类AppComponent {
数据：any =
[
{
parentName ：父母一，
childProperties：
[
{ propertyName：财产一}，
{ propertyName：财产二}
]
}，
{
parentName：父母二，
childProperties：
[
{ propertyName：属性三}，
{ propertyName：属性四}，
{ propertyName：属性五}，
]
}，
{
parentName：父母三，
childProperties：
[
{ propertyName：属性六}，
{ propertyName ：属性7}，
{ propertyName： P八绳}，
]
}
]
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方式制作它。.请帮助我使用 pure angular and typescript 。
正在工作 stackblitz https://stackblitz.com / edit / angular-lp3riw
您可以在演示中看到父按钮可见，但如果单击该按钮，则其不会扩展。 / p>
还在下方列出了带有静态值的可折叠按钮。
如何像给定的那样制作可折叠的手风琴
将函数保留在<$ c中$ c> ngAfterViewInit 而不是 ngOnInit 。请参阅更新的 stackblitz
问题在于，在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;
}
}）；
}
}
使用角度如下所示。
在按钮上保留单击功能，并将属性 isActive 绑定到相应的数组元素。然后根据isActive是否具有值true / false来显示/隐藏手风琴。
< div * ngFor =让item of数据；让i =索引；>
< button class = accordion（click）= toggleAccordian（$ event，i）> {{item.parentName}}< / button>
< div class = panel * ngFor =让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;
}否则{
panel.style.maxHeight = panel.scrollHeight + px;
}
}
I am making accordion to make a collapsible div using javascript in angular application..
For which if its not getting open on click over the button on Parent One or any other parent name..
Html:
<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";
}
});
}
}
}
Note: As i am new in angular i am making it with javascript way.. So kindly help me to achieve the result using pure angular and typescript..
Working stackblitz https://stackblitz.com/edit/angular-lp3riw
You can see in demo that the parent button are visible but if you click over the button its not getting expanded..
Also listed down working collapsible button below with static values..
How to make a collapsible accordion as like given stackblitz static values using angular and typescript way (Without any third party or jquery)..
Keep your function in ngAfterViewInit instead of ngOnInit. See updated stackblitz
The problem is that on ngOnInit the view is not completely painted, and you do not get all the elements on which you want to bind the function.
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";
}
});
}
}
Using angular do it like shown below.
Keep a click function on the button and bind a property isActive to the corresponding array element. Then show/hide the accordian based on if isActive has value true/false.
<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";
}
}
这篇关于可折叠的手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
