angular - 单击按钮时如何展开/折叠手风琴选项卡?
问题描述
我有这个手风琴,所以为了展开/折叠手风琴选项卡,我单击选项卡上的任意位置,但我希望能够在仅单击“单击我”按钮而不是手风琴选项卡时展开/折叠。谁能指出我正确的方向?提前非常感谢!
这是我的代码:
<p-accordionTab header="Accordion Tab 1" [selected]="true">
<p-header>
Accordion Tab 1
<span>
<button (click)="myFunction($event)">Click me</button>
</span>
</p-header>
<ul>
<li>Colors</li>
</ul>
</p-accordionTab>
解决方案
css 文件:-
.zippy{
border: 1px solid #ccc;
border-radius:2px;
}
.zippy-heading{
font-weight: bold;
padding: 20px;
cursor: pointer;
background: #f09b9b;
}
.zippy-body{
padding: 20px;
}
.expanded{
background: #b3b0b0;
}
html视图:-
<div class="zippy" style="padding:40px;">
<div class="zippy-heading"
[class.expanded]="isExpandedBikes"
(click)="onBikeClick()">
{{bike}}
<span
class="fa"
[class.fa-angle-down] ="!isExpandedBikes"
[class.fa-angle-up]="isExpandedBikes"
(click)="onBikeClick()" style="font-size: 20px; position: absolute;right: 50px;"></span>
</div>
<div *ngIf="isExpandedBikes" class="zippy-body">
<li *ngFor ="let data of bikeContent">
{{data}}
</li>
</div>
</div>
组件文件:-
constructor() {
this.bike = "Bikes";
this.bikeContent=["My First Bike","My Second Bike","My Third Bike"];
}
对于组件文件中的按钮 Fxn:-
onBikeClick(){
this.isExpandedBikes =! this.isExpandedBikes;
}
推荐阅读
- tfs - TFS 2017 测试用例历史
- scala - 连接多个数据框的功能方式
- linux - 是否有适用于 Windows 和 Linux 的 vscode 片段路径变量?
- maven - 使用我的依赖项组装一个 Karaf 容器
- r - 使用 FileZilla 自动将文件从远程服务器传输到本地文件夹或从 R 访问 SFTP 服务器
- python - 如何从字典内的列表中删除元素?
- mongodb - mongodb聚合多个数组
- python - 以特定方式遍历多维数组
- c# - 我可以在 C# 中相同基类型的多个列表上使用通用 getter/setter 方法吗
- gosu - 如何创建 WorkQueue Guidewire?