手风琴

创建一个列表，其中每个项目可以通过点击标题单独显示。

用法

手风琴组件包含一个具有 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 键切换聚焦标题的内容。

文档

手风琴