CSS框架UIkit如何实现手风琴效果？UIkit accordion组件展开收起控制详解

手风琴效果（Accordion）指的是一组可以折叠的内容面板，用户点击某个标题时对应的区域展开，再次点击则收起，其他面板可以保持关闭状态，整体看起来像手风琴一样伸缩。UIkit对这类交互做了原生支持，开发者不需要自己写切换逻辑和高度动画，只要按照规定的HTML结构组织标签，再配合data属性就能得到一个体验流畅的手风琴。本文从结构、属性、API三个层面展开讲解。

一、UIkit accordion的基础结构与最简实现

UIkit的accordion组件对HTML结构有一定要求，整体由一个容器和若干子项构成。容器上需要添加uk-accordion属性，每个子项使用uk-accordion-item类，子项内部再分为标题和内容两部分。标题放在<a>标签中并加上uk-accordion-title类，内容区域则使用uk-accordion-content类。一个最简单的完整示例如下：

<div uk-accordion>
    <div class="uk-accordion-item">
        <a class="uk-accordion-title" href="#">什么是UIkit？</a>
        <div class="uk-accordion-content">
            <p>UIkit是一款轻量级、模块化的前端CSS框架，提供了丰富的组件和样式。</p>
        </div>
    </div>
    <div class="uk-accordion-item">
        <a class="uk-accordion-title" href="#">手风琴有什么用？</a>
        <div class="uk-accordion-content">
            <p>常用于FAQ问答、商品参数展示、侧边栏导航等需要折叠内容的场景。</p>
        </div>
    </div>
</div>

这段代码可以直接运行，前提是页面已经引入了UIkit的CSS文件和JS文件，通常还需要引入UIKit的图标库。引入方式如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3/dist/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/npm/uikit@3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3/dist/js/uikit-icons.min.js"></script>

默认情况下，第一个面板处于展开状态，其余面板收起。如果想让所有面板默认全部收起，可以给每个uk-accordion-item元素添加hidden属性，这样页面加载时不会有任何面板自动打开。反过来，如果想让某个特定面板默认展开，则给它加上class="uk-open"类即可，注意uk-open不要和hidden同时使用，否则会出现状态冲突。

二、常用data属性配置：多面板展开与动画控制

uk-accordion属性支持多个参数，这些参数可以直接写在属性里，也可以通过uk-accordion="{...}"的JSON格式传入。最常用的一个参数是multiple，默认情况下accordion同一时间只允许一个面板展开，点击新标题时旧面板会自动收起，这在FAQ场景中是合理的行为。但如果希望用户可以同时展开多个面板，就需要开启multiple模式。

<div uk-accordion="multiple: true">
    <div class="uk-accordion-item">
        <a class="uk-accordion-title" href="#">面板一</a>
        <div class="uk-accordion-content">
            <p>开启multiple后，此面板展开时其他面板不会自动收起。</p>
        </div>
    </div>
    <div class="uk-accordion-item">
        <a class="uk-accordion-title" href="#">面板二</a>
        <div class="uk-accordion-content">
            <p>可以和面板一同时处于展开状态。</p>
        </div>
    </div>
</div>

除了multiple，还有两个参数值得了解。collapsible控制当前展开的面板能否被再次点击收起，设置为false后，至少会有一个面板保持打开状态，适合内容强依赖的场景；transition参数可以调整动画效果，默认值是ease，配合duration可以改变展开收起的动画时长。参数写法如下：

<div uk-accordion="collapsible: false; transition: ease-in-out; duration: 300">
    <!-- 子项结构同上 -->
</div>

需要注意的是，动画时长单位是毫秒，数值越大动画越慢。如果觉得默认动画太快显得生硬，把duration调到300到400之间会比较自然。另外，accordion的高度动画是基于内容实际高度计算的，所以内容里如果有图片，建议给图片指定宽高，避免图片加载完成后面板高度跳变。

三、通过JavaScript API动态控制展开与收起

有些业务场景下，页面上的按钮需要控制手风琴的展开收起，比如“全部展开”“全部收起”这类操作。UIkit提供了组件的JavaScript API，通过UIkit.accordion(element)可以拿到accordion组件实例，然后调用toggle(index, animate)方法来切换指定面板的状态。index从0开始计数，animate参数为false时切换不会有动画，默认为true。

// 获取accordion组件实例
var accordion = UIkit.accordion('#my-accordion');

// 切换第二个面板（索引为1）的展开状态
accordion.toggle(1, true);

// 全部展开
document.getElementById('expandAll').addEventListener('click', function () {
    var items = document.querySelectorAll('#my-accordion .uk-accordion-item');
    items.forEach(function (item, index) {
        // 仅对处于收起状态的面板执行toggle
        if (!item.classList.contains('uk-open')) {
            accordion.toggle(index, true);
        }
    });
});

组件还暴露了几个实用的事件，可以用来监听面板状态变化。beforeshow在面板即将展开前触发，shown在展开动画结束后触发，对应的还有beforehide和hidden。利用这些事件可以在面板展开时做懒加载，比如面板内容较大时先显示loading，等shown触发后再请求真实数据：

UIkit.util.on('#my-accordion', 'shown', function () {
    console.log('面板展开完成');
    // 这里可以执行懒加载逻辑
});

UIkit.util.on('#my-accordion', 'hidden', function () {
    console.log('面板收起完成');
});

有一个常见的坑需要提醒：如果手风琴是动态生成的，比如通过AJAX请求后拼接HTML再插入页面，一定要在插入完成之后重新初始化组件，调用UIkit.accordion(container)即可。因为UIkit在页面初次加载时会自动扫描并绑定组件，后插入的DOM不会被自动识别，直接初始化一次就能解决点击标题无反应的问题。

四、常见问题与样式定制建议

实际使用中经常遇到的第一个问题是内容中嵌套accordion失效。原因是事件冒泡导致点击内层标题时外层也被触发。解决办法是给内层手风琴容器绑定事件时阻止冒泡，或者尽量避免嵌套结构，改用分页或标签页（Tab）组件来组织层级内容，交互上会更清晰。

第二个问题与默认收起有关。前面提到给item加hidden属性可以让面板默认关闭，但如果你的内容是服务端渲染输出、又希望保持HTML干净，也可以在文档加载后用JS统一处理：

document.addEventListener('DOMContentLoaded', function () {
    var items = document.querySelectorAll('#my-accordion .uk-accordion-item');
    items.forEach(function (item) {
        item.classList.remove('uk-open');
    });
});

样式方面，UIkit的accordion默认带下边框分隔，标题右侧有一个展开指示箭头。如果想自定义箭头方向或颜色，可以覆写.uk-accordion-title::after的样式；想调整内容区域的内边距，则修改.uk-accordion-content的padding值即可。由于UIkit使用SASS构建，官方推荐通过修改变量的方式定制主题，直接覆盖CSS类虽然见效快，但在升级框架版本时容易出现样式被覆盖回去的情况，长期维护的项目建议走SASS定制路线。

总体来看，UIkit的accordion组件把结构、交互、动画都封装好了，日常需求基本不需要写额外的JavaScript，涉及复杂交互时再借助toggle方法和事件系统扩展。掌握好multiple、collapsible这几个参数以及动态初始化的时机，就能在绝大多数项目中稳定实现手风琴效果。

UIkit accordion手风琴效果CSS框架修改时间：2026-09-03 20:51:13