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

【问题标题】：How to expand/collapse accordion tab when clicking a button?单击按钮时如何展开/折叠手风琴选项卡？
【发布时间】：2019-04-01 20:13:57
【问题描述】：

我有这个手风琴，所以为了展开/折叠手风琴选项卡，我单击选项卡上的任意位置，但我希望能够在单击 ONLY 时展开/折叠strong> 在“点击我”按钮上，而不是在手风琴标签上。谁能指出我正确的方向？提前非常感谢！

这是我的代码：

LIVE DEMO

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

【问题讨论】：

标签： angular typescript primeng

【解决方案1】：

基于您正在使用的手风琴组件的docs，您可以使用Programmatic Control来实现您所需要的。

这是DEMO，我在其中修改了您的代码。所有选项卡都被禁用，并且以编程方式打开/关闭它们只有通过单击其标题中的“单击我”按钮。

UPD 新 DEMO 与：

multiple="true"
默认打开所有选项卡
覆盖disabled 属性的自定义样式

【讨论】：

我不想禁用所有手风琴选项卡，我仍然想在手风琴级别使用 [multiple]="true"，就像我在代码中使用它一样
@progx 您可以根据文档使用 [multiple]="true" 与此解决方案：“可以使用 activeIndex 属性以编程方式控制选项卡，在单一模式下它应该是一个数字，在多个模式下定义活动选项卡索引的数字数组。"
您的解决方案不适用于 [multiple]="true"，我想保持所有选项卡打开
@progx 我已经更新了答案以包含以下解决方案：1. 默认打开所有选项卡 2. 使用 multiple="true" 3. 具有覆盖禁用道具的自定义样式跨度>
在this.indexes = [ ...this.indexes ];之后添加this.changeDetectorRef.detectChanges();

【解决方案2】：

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

【讨论】：