手风琴

创建一个列表，可以通过单击项目的标题来单独显示列表项。

用法

手风琴组件由具有 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 状态以及设置为相应内容的 ID 的 aria-controls 属性。
内容具有 ID、region 角色以及设置为相应标题的 ID 的 aria-labelledby 属性。

键盘交互

可以使用以下键通过键盘访问手风琴组件。

tab 或 shift+tab 键在手风琴标题之间导航。
enter 或 space 键切换焦点标题的内容。

文档

手风琴