Accordion

创建一个项目列表，点击某一项的标题即可单独显示该项的内容。

用法

Accordion 组件由一个带 uk-accordion 属性的父容器，加上每个手风琴项目的标题与内容部分组成。

类	说明
`.uk-accordion-title`	定义并设置每个手风琴项目开关的样式。使用 `<a>` 元素。
`.uk-accordion-content`	定义每个手风琴项目的内容部分。

要为手风琴应用样式，请添加 .uk-accordion-default 修饰符。

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

Item 1

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

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

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

<ul class="uk-accordion-default" 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>

图标

要创建手风琴图标，只需在手风琴标题的末尾添加一个带 uk-accordion-icon 属性的 span 元素。

<a class="uk-accordion-title" href>Item 1 <span uk-accordion-icon></span></a>

Item 1

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

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

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

<ul class="uk-accordion-default" uk-accordion>
    <li class="uk-open">
        <a class="uk-accordion-title" href>Item 1 <span uk-accordion-icon></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 <span uk-accordion-icon></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 <span uk-accordion-icon></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 class="uk-accordion-default" uk-accordion="collapsible: false">…</ul>

Item 1

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

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

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

<ul class="uk-accordion-default" uk-accordion="collapsible: false">
    <li>
        <a class="uk-accordion-title" href>Item 1 <span uk-accordion-icon></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 <span uk-accordion-icon></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 <span uk-accordion-icon></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-accordion 属性添加 multiple: true 选项。

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

Item 1

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

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

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

<ul class="uk-accordion-default" uk-accordion="multiple: true">
    <li class="uk-open">
        <a class="uk-accordion-title" href>Item 1 <span uk-accordion-icon></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 <span uk-accordion-icon></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 <span uk-accordion-icon></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 类。你也可以用这种方式同时展开多个项目，只要确保为 uk-accordion 属性添加 multiple: true 选项即可。

注意另一种做法是为 uk-accordion 属性添加 active: <index> 选项来展开单个项目，例如 active: 1 会展开第二个元素（索引从 0 开始）。请注意，这会覆盖 uk-open 类。

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

Item 1

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

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

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

<ul class="uk-accordion-default" uk-accordion>
    <li>
        <a class="uk-accordion-title" href>Item 1 <span uk-accordion-icon></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 <span uk-accordion-icon></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 <span uk-accordion-icon></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`	Number	`false`	初始时要展开的元素的索引。
`animation`	Boolean	`true`	直接显示项目，或者通过过渡动画显示。
`collapsible`	Boolean	`true`	是否允许关闭所有项目。
`content`	String	`> .uk-accordion-content`	内容选择器，用于选中手风琴的内容元素。
`duration`	Number	`200`	动画持续时间，单位为毫秒。
`multiple`	Boolean	`false`	是否允许同时展开多个项目。
`targets`	String	`> *`	要切换的元素的 CSS 选择器。
`toggle`	String	`> .uk-accordion-title`	开关选择器，用于切换手风琴项目。
`transition`	String	`ease`	显示项目时使用的过渡效果。使用关键字来指定缓动函数。
`offset`	Number	`0`	附加到滚动位置顶部的像素偏移量。

JavaScript

了解更多关于 JavaScript 组件的信息。

初始化

UIkit.accordion(element, options);

事件

以下事件会在挂载了该组件的元素上触发：

名称	说明
`beforeshow`	在项目显示之前触发。可以通过在事件上调用 `preventDefault()` 来阻止显示。
`show`	在项目显示之后触发。
`shown`	在项目的显示动画完成后触发。
`beforehide`	在项目隐藏之前触发。可以通过在事件上调用 `preventDefault()` 来阻止隐藏。
`hide`	在项目的隐藏动画开始后触发。
`hidden`	在项目隐藏之后触发。

方法

该组件提供以下方法：

切换

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

切换内容面板。

名称	类型	默认值	说明
`index`	String, Number, Node	0	要切换的手风琴面板，索引从 0 开始。
`animate`	Boolean	true	传入 false 可以禁止展开动画。

可访问性

Accordion 组件遵循 Accordion WAI-ARIA 设计模式，并会自动设置合适的 WAI-ARIA 角色、状态和属性。

标题带有一个 ID、button 角色、aria-expanded 状态，以及指向对应内容 ID 的 aria-controls 属性。
内容带有一个 ID、region 角色，以及指向对应标题 ID 的 aria-labelledby 属性。

键盘交互

Accordion 组件可以通过以下按键进行键盘操作。

tab 或 shift+tab 键用于在手风琴标题之间移动。
enter 或 space 键用于切换当前聚焦标题对应的内容。

文档

Accordion