ionic 3展开式列表会在另一个项目打开时关闭该项目

时间:2018-08-07 09:20:40

标签: html angular typescript

我的侧边菜单中有一个可扩展列表

这是我的代码:

 <ion-list class="user-list">
  <button ion-item menuClose class="text-1x" *ngFor="let menuItem of appMenuItems" (click)="openPage(menuItem)">
    <ion-icon item-left [name]="menuItem.icon" color="primary"></ion-icon>
    <span ion-text color="primary">{{menuItem.title}}</span>
  </button>
  <button ion-item class="text-1x" (click)="showItem=!showItem">
      <ion-icon item-left name="star" color="primary"></ion-icon>
      <ion-icon item-right name="arrow-dropright" *ngIf="!showItem" color="primary"></ion-icon>
      <ion-icon item-right name="arrow-dropdown" *ngIf="showItem" color="primary"></ion-icon>
      <span ion-text color="primary">FAQ</span>
      </button>
  <ion-item *ngIf="showItem" no-padding>
  <ion-list *ngFor="let item of faqData; let i = index " no-lines no-padding no-margin style="margin:0 0 0 0">
      <button ion-item (click)="toggleSection(i)" style="color:black;white-space: none;margin-left:5%; height:10% " detail-none>
          <ion-icon item-left name="arrow-dropright" *ngIf="!item.open"></ion-icon>
          <ion-icon item-left name="arrow-dropdown" *ngIf="item.open"></ion-icon>
          <span style="font-size:0.9em;white-space: normal;" no-padding> {{ item.question }}</span>
        </button>

        <ion-list *ngIf="item.answer && item.open" no-lines is-open="item.open">

              <ion-item (click)="toggleItem(i)" *ngIf="item.answer" class="child" detail-none style="white-space: none;margin-left:5%; height:10%" no-margin>

              <span style="font-size:0.7em;white-space: normal;">  {{ item.answer }}</span>
               </ion-item>
              </ion-list>
    </ion-list>
    </ion-item>

</ion-list>

I am getting the list as which i open the list it expands but previous opened list also in open. I need to close the previous one when next list opens

0 个答案:

没有答案