Как развернуть / свернуть вкладку аккордеона при нажатии кнопки? - PullRequest
Новая
       8

Как развернуть / свернуть вкладку аккордеона при нажатии кнопки?

2 голосов
/ 21 марта 2019

У меня есть этот аккордеон, поэтому, чтобы развернуть / свернуть вкладку аккордеона, я нажимаю в любом месте на вкладке, но я хочу иметь возможность развернуть / свернуть при нажатии ТОЛЬКО на кнопку «Нажми меня» , а не на вкладке аккордеона. Может кто-то указать мне верное направление? Заранее большое спасибо!

Вот мой код:

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>

Ответы [ 2 ]

0 голосов
/ 01 апреля 2019

Файл 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;
 }
0 голосов
/ 21 марта 2019

Исходя из документов для используемого вами компонента аккордеона, вы можете использовать Programmatic Control для реализации того, что вам нужно.

Вот DEMO , где я изменил ваш код. Все вкладки отключены, и они открываются / закрываются программно только при нажатии на кнопки «Нажмите меня» в их заголовках.

UPD новый DEMO с:

  • multiple="true"
  • по умолчанию все вкладки открыты
  • пользовательский стиль, который перезаписывает свойство disabled
...