UIkit3.x文档

手风琴

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

用法

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

Class Description
.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>
    • Item 1

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

    • Item 2
    • Item 3
  • <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>
    • Item 1

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

    • Item 2
    • Item 3
  • <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>
    • Item 1

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

    • Item 2
    • Item 3
  • <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 属性即可。

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

<ul uk-accordion>
    <li></li>
    <li class="uk-open"></li>
    <li></li>
</ul>
    • Item 1
    • 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
  • <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>

组件选项

这些选项中的任何一个都可以应用于组件属性。 用分号分隔多个选项。 了解更多

Option Value Default Description
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 显示项目时要使用的过渡。 使用关键字来实现 缓动功能

JavaScript

进一步了解 JavaScript 组件.

初始化

UIkit.accordion(element, options);

事件

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

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

方法

以下方法可用于该组件:

切换

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

切换内容窗格。

Name Type Default Description
index String, Integer, Node 0 手风琴窗格进行切换。 从0开始的索引。
animate Boolean true 通过传递false来控制打开动画。