手风琴／Accordion

# 手风琴／Accordion

<p class="uk-text-lead">创建可以通过单击项目标题单独显示的项目列表。</p>

## Usage-用法

手风琴组件由具有 `uk-accordion` 属性的父容器以及每个手风琴项目的标题和内容部分组成。

| Class                   | 描述                                                                |
|:------------------------|:---------------------------------------------------------------------------|
| `.uk-accordion-title`   | 为每个手风琴项目定义并设置样式，使用 `<a>` 标记。 |
| `.uk-accordion-content` | 定义每个手风琴项目的内容部分。                          |

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

```example
<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>
```

***

## No collapsing-无收缩

默认情况下，是可以折叠手风琴所有项目的。若要防止此行为并始终保持一个展开的项目， 请将 `collapsible: false` 选项添加到属性中。

```html
<ul uk-accordion="collapsible: false">...</ul>
```

```example
<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 open items-多个展开项目

若要同时显示多个内容节，而其中一个在另一个内容节打开时不折叠，请将 `multiple: true` 选项添加到 `uk-accordion` 属性中。

```html
<ul uk-accordion="multiple: true">...</ul>
```

```example
<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>
```

***

## Set open items-设置默认展开项目

如果指定默认展开的项目，请将 `.uk-open` 类添加到该项。也可以使用此选项打开多个项目。只需确保将选项 `multiple: true` 添加到 `uk-accordion` 属性即可。

**注意** 或者，可以通过将 `active: <index>` 选项添加到 `uk-accordion` 属性来打开单个项，例如 `active: 1` 以显示第二个元素（索引从零开始）。请注意，这将覆盖 `uk-open` 类。

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

```example
<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>
```

***

## Component options-组件选项

这些选项中的任何一个都可以应用于组件属性。 用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项        | 可用值   | 默认值 | 描述                                |
|:--------------|:--------|:--------|:-------------------------------------------|
| `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`  | 显示项目时要使用的过渡。 使用关键字来实现 [缓动功能](https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function#Keywords_for_common_timing-functions)。 |
| `offset`      | Number  | `0`     | 向滚动到顶部添加像素偏移   |

***

## JavaScript

进一步了解 [ JavaScript 组件](javascript.md#programmatic-use)。

### 初始化

```js
UIkit.accordion(element, options);
```

### 事件

附加此组件的元素将触发以下事件：

| 名称         |    描述                                                              |
|:-------------|:-------------------------------------------------------------------------|
| `beforeshow` | 在显示项目之前触发。 可以通过在事件上调用 `preventDefault()` 来阻止显示。 |
| `show`       | 显示一个项目后触发。                                            |
| `shown`      | 在项目的过渡动画完成后触发。                     |
| `beforehide` | 在隐藏项之前触发。可以通过对事件调用 `preventDefault()` 来阻止隐藏。 |
| `hide`       | 在项目的隐藏动画启动后触发。                        |
| `hidden`     | 项目被隐藏后触发。                                          |

### 方法

以下方法可用于该组件：

#### 切换

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

切换内容窗格。

| 名称      | 类型                  | 默认值 | 描述                                  |
|:----------|:----------------------|:--------|:---------------------------------------------|
| `index`   | String, Integer, Node | 0       | 手风琴窗格进行切换。 从0开始的索引。     |
| `animate` | Boolean               | true    | 通过传递false来控制打开动画。 |