摺疊面板元件 accordion-component

Last update: Mon Oct 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

「核心元件摺疊面板」元件可讓您在頁面上建立以摺疊面板排列的面板集合。

TIP

您是否考慮過適用於 AEM 的 Edge Delivery Services？

現有的專案可以繼續使用本文件中所述的方法。然而，針對新專案，Adobe 建議採用 Edge Delivery Services。

用途 usage

核心元件摺疊面板元件允許建立元件集合 (由面板組成)，並在頁面上以摺疊面板排列，類似於索引標籤元件，但允許展開和收合面板。

摺疊面板元件的目前版本為 v1，此版本於 2019 年 6 月隨著核心元件 2.5.0 版發行導入，詳情請參閱本文件。

下表詳細說明該元件的所有支援版本、與元件版本相容的 AEM 版本，以及舊版文件的連結。

元件版本

AEM 6.4

AEM 6.5

AEM 6.5 LTS

AEM as a Cloud Service

與
2.17.4 版及更早版本相容

相容

如需核心元件版本和發行版本的進一步詳細資訊，請參閱核心元件版本文件。

若要體驗「摺疊面板元件」，並檢視其設定選項及 HTML 和 JSON 輸出的範例，請造訪「元件庫」。

在 GitHub 上可找到有關摺疊面板元件的最新技術文件。

如需開發「核心元件」的進一步詳細資訊，請參閱核心元件開發人員文件。

摺疊面板、輪播、和索引標籤元件支援直接連結至元件中的面板。

執行方法：

在頁面編輯器中使用 以發佈頁面形式檢視 選項，檢視含有元件的頁面。
檢查頁面內容並識別面板的 ID。
- 例如：id="accordion-86196c94d3-item-ca319dbb0b"
ID 可以使用井字號 (#) 附加至 URL 成為錨點。
- 例如：https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b

導覽至將面板 ID 作為錨點的 URL 時，瀏覽器會直接捲動至特定元件，並顯示指定的面板。如果面板預設為不展開，則將會自動展開。

所有「核心元件」都設計為可充分回應，以確保裝置間的順暢體驗。

某些進階元件 (如摺疊面板元件) 在實施專案的內容中可能需要特別考量，以保持在所有條件下的回應能力。如需詳細資訊，請參閱核心元件的回應式設計文件。

設定對話框可讓內容作者定義摺疊面板項目、其面板，以及其對頁面訪客的行為與顯示方式。

摺疊面板元件編輯對話框的項目索引標籤

使用新增按鈕開啟元件選擇器，選擇要新增為面板的元件。新增後，就會在清單中新增一個項目，其中包含以下各欄：

TIP

若縮小頁面檢視區，使編輯對話框進入全螢幕模式，則會隱藏新增按鈕。元件仍可新增至摺疊面板元件，只需從元件瀏覽器拖曳並放置到頁面編輯器的摺疊面板元件上。

摺疊面板元件編輯對話框的屬性索引標籤

單一項目展開 - 選取後，此選項會強制一次展開單一摺疊面板項目。展開一個項目後，其他所有項目都會收合。
展開的項目 - 此選項會定義載入頁面時預設展開的項目。
- 選取 單一項目展開 時，必須選取一個面板。根據預設，會選取第一個面板。
- 未選取 單一項目展開 時，此選項為多重選取且是選擇性的。
ID - 此選項可讓您控制 HTML 和資料層中元件的唯一識別碼。
- 如果留空，則會自動產生唯一識別碼，您可以透過檢查得出的頁面找到該 ID。
- 若已指定 ID，則作者應確保其為唯一識別碼。
- 變更該 ID 會對 CSS、JS 和「資料層」追蹤造成影響。