代码之家 › 专栏 › 技术社区 › Devmix

单击按钮时如何展开/折叠手风琴选项卡?

primeng typescript angular

0

Devmix · 技术社区 · 6 年前

我有手风琴,所以为了 展开/折叠 一个手风琴标签我点击标签上的任何地方,但我想能够展开/折叠时,点击仅限 “单击我”按钮 而不是在手风琴标签上。有人能给我指出正确的方向吗?提前多谢了!

这是我的密码:

<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>

0 回复 | 直到 6 年前

1

0

Nadine 6 年前

基于 docs 对于您正在使用的手风琴组件,可以使用实现你所需要的。

这是你的名字 DEMO ,我修改了你的代码。所有选项卡都被禁用,并以编程方式打开/关闭 只需单击“单击我”按钮

升级版 新的 DEMO 使用:

multiple="true"
默认情况下打开所有选项卡
覆盖 disabled

2

0

Harpreet Singh 6 年前

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;
 }