You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何一次性展开或折叠ion-accordion-group中的所有ion-accordion?

如何在无需手动赋值和状态管理的情况下实现IonAccordionGroup的全部展开/折叠?

我原本以为下面的代码能实现一键展开所有折叠面板:

<button (click)="myAccordionGroup.expandAll()">Expand all</button>
<ion-accordion-group #myAccordionGroup>
  <ion-accordion>
    <ion-item slot="header">
      <ion-label>First Accordion</ion-label>
    </ion-item>
    <div slot="content">First accordion content</div>
  </ion-accordion>
  <ion-accordion>
    <ion-item slot="header">
      <ion-label>Second Accordion</ion-label>
    </ion-item>
    <div slot="content">Second accordion content</div>
  </ion-accordion>
</ion-accordion-group>

但实际发现IonAccordionGroup.expandAll()这个方法根本不存在,截至目前IonAccordionGroup并没有暴露任何可直接调用的方法。

我目前用临时方案解决:给每个ion-accordion手动设置value,然后把ion-accordion-group的value设为包含所有这些value的数组来实现全部展开;设为空数组实现全部折叠。

但我想找一种更简洁的实现方式,满足以下两个要求:

  • 不需要手动给每个ion-accordion元素分配value
  • 不需要在组件中手动管理ion-accordion-group的状态

内容的提问来源于stack exchange,提问作者Rens Jaspers

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.22 02:25:01