手風琴

建立一個項目列表，可以通過點擊項目的標題單獨顯示。

用法

手風琴元件包含一個具有 uk-accordion 屬性的父容器，以及每個手風琴項目的標題和內容部分。

類別	描述
`.uk-accordion-title`	定義並設定每個手風琴項目切換的樣式。使用 `<a>` 元素。
`.uk-accordion-content`	定義每個手風琴項目的內容部分。

<ul uk-accordion>
    <li>
        <a class="uk-accordion-title" href></a>
        <div class="uk-accordion-content"></div>
    </li>
</ul>

項目 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
項目 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
項目 3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

<ul uk-accordion>
    <li class="uk-open">
        <a class="uk-accordion-title" href>Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

不折疊

預設情況下，所有手風琴項目都可以折疊。若要防止此行為並始終保持一個開啟的項目，請將 collapsible: false 選項新增至屬性。

<ul uk-accordion="collapsible: false">…</ul>

項目 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
項目 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
項目 3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

<ul uk-accordion="collapsible: false">
    <li>
        <a class="uk-accordion-title" href>Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

多個開啟的項目

若要同時顯示多個內容區段，而不會在開啟另一個區段時折疊其中一個區段，請將 multiple: true 選項新增至 uk-accordion 屬性。

<ul uk-accordion="multiple: true">…</ul>

項目 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
項目 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
項目 3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

<ul uk-accordion="multiple: true">
    <li class="uk-open">
        <a class="uk-accordion-title" href>Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

設定開啟的項目

若要指定最初應開啟哪些項目，請將 .uk-open 類別新增至該項目。您也可以使用它來開啟多個項目。請務必將選項 multiple: true 新增至 uk-accordion 屬性。

注意或者，您可以將 active: <index> 選項新增至 uk-accordion 屬性來開啟單個項目，例如 active: 1 來顯示第二個元素（索引從零開始）。請注意，這會覆寫 uk-open 類別。

<ul uk-accordion>
    <li></li>
    <li class="uk-open"></li>
    <li></li>
</ul>

項目 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
項目 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
項目 3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

<ul uk-accordion>
    <li>
        <a class="uk-accordion-title" href>Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li class="uk-open">
        <a class="uk-accordion-title" href>Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

元件選項

這些選項中的任何一個都可以應用於元件屬性。用分號分隔多個選項。瞭解更多

選項	值	預設值	描述
`active`	數字	`false`	最初要開啟的元素的索引。
`animation`	布林值	`true`	直接顯示項目或使用轉場。
`collapsible`	布林值	`true`	允許關閉所有項目。
`content`	字串	`> .uk-accordion-content`	內容選取器，用於選取手風琴內容元素。
`duration`	數字	`200`	動畫持續時間（毫秒）。
`multiple`	布林值	`false`	允許開啟多個項目。
`targets`	字串	`> *`	要切換的元素的 CSS 選取器。
`toggle`	字串	`> .uk-accordion-title`	切換選取器，用於切換手風琴項目。
`transition`	字串	`ease`	顯示項目時要使用的轉場效果。使用關鍵字來表示缓动函数。
`offset`	數字	`0`	新增至捲動頂部的像素偏移。

JavaScript

瞭解更多關於JavaScript 元件的資訊。

初始化

UIkit.accordion(element, options);

事件

在附加此元件的元素上，將觸發以下事件

名稱	描述
`beforeshow`	在顯示項目之前觸發。可以通過在事件上呼叫 `preventDefault()` 來防止顯示。
`show`	在顯示項目之後觸發。
`shown`	在完成項目的顯示動畫後觸發。
`beforehide`	在隱藏項目之前觸發。可以通過在事件上呼叫 `preventDefault()` 來防止隱藏。
`hide`	在項目開始隱藏動畫後觸發。
`hidden`	在隱藏項目後觸發。

方法

以下方法適用於元件

切換

UIkit.accordion(element).toggle(index, animate);

切換內容窗格。

名稱	類型	預設值	描述
`index`	字串、數字、節點	0	要切換的手風琴窗格。索引從 0 開始。
`animate`	布林值	true	傳遞 false 來抑制開啟動畫。

輔助功能

手風琴元件遵循手風琴 WAI-ARIA 設計模式，並自動設定適當的 WAI-ARIA 角色、狀態和屬性。

標題具有 ID、button 角色、aria-expanded 狀態和 aria-controls 屬性，這些屬性已設定為各自內容的 ID。
內容具有 ID、region 角色和 aria-labelledby 屬性，這些屬性已設定為各自標題的 ID。

鍵盤互動

可以使用以下按鍵通過鍵盤存取手風琴元件。

tab 或 shift+tab 鍵在手風琴標題之間導航。
enter 或 space 鍵會切換焦點標題的內容。

文件

手風琴