手风琴
创建一个项目列表，允许通过单击其标题来展开和折叠每个项目的内容。
用法
要应用手风琴组件，请将 uk-accordion 类和 data-uk-accordion 属性添加到容器元素。 将 uk-accordion-content 类添加到容器内的每个内容部分。 最后，将 uk-accordion-title 类添加到内容部分上方的任何元素（如标题），以创建切换。
示例
标题 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
标题 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
标题 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
标记
<div class="uk-accordion" data-uk-accordion>
<h3 class="uk-accordion-title">...</h3>
<div class="uk-accordion-content">...</div>
<h3 class="uk-accordion-title">...</h3>
<div class="uk-accordion-content">...</div>
<h3 class="uk-accordion-title">...</h3>
<div class="uk-accordion-content">...</div>
</div>多个打开的项目
要同时显示多个内容部分，而不会在一个打开时折叠另一个，请将 {collapse: false} 选项添加到数据属性。
示例
标题 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
标题 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
标题 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
JavaScript 选项
| 选项 | 可能的值 | 默认值 | 描述 |
|---|---|---|---|
showfirst |
布尔值 | true | 在初始化时显示第一个项目 |
collapse |
布尔值 | true | 允许打开多个项目 |
animate |
布尔值 | true | 动画切换 |
easing |
字符串 | swing | 动画函数 |
duration |
整数 | 300 | 动画持续时间 |
toggle |
字符串 | .uk-accordion-title | 切换的 CSS 选择器 |
containers |
字符串 | .uk-accordion-content | 内容容器的 CSS 选择器 |
clsactive |
字符串 | uk-active | 项目处于活动状态时添加的类 |
手动初始化元素
var accordion = UIkit.accordion(element, { /* options */ });事件
| 名称 | 参数 | 描述 |
|---|---|---|
toggle.uk.accordion |
event, active, toggle, content | 在项目切换时 |
