要使用ngFor创建手风琴菜单,并在点击时自动关闭和打开另一个菜单,可以按照以下步骤进行操作:
{{ menu.title }}
import { Component } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent {
menus = [
{ title: '菜单1', isOpen: false },
{ title: '菜单2', isOpen: false },
{ title: '菜单3', isOpen: false }
];
toggleMenu(index: number) {
this.menus.forEach((menu, i) => {
menu.isOpen = (i === index && !menu.isOpen);
});
}
}
.accordion {
width: 100%;
}
.accordion-header {
background-color: #f1f1f1;
padding: 10px;
cursor: pointer;
}
.accordion-header:hover {
background-color: #e0e0e0;
}
.accordion-content {
background-color: #ffffff;
padding: 10px;
border: 1px solid #e0e0e0;
}
.active .accordion-header {
background-color: #e0e0e0;
}
通过以上步骤,你就可以在Angular中使用ngFor创建手风琴菜单,并在点击时自动关闭和打开另一个菜单。