为什么我的UIkit手风琴只能展开一个面板？

Mc.焕玲提问于 2026-02-02 06:04:27 阅读 85

组件

我用UIkit做手风琴菜单时，设置成允许多展开后完全失效，只能同时打开一个面板。按照文档写了data-uk-accordion=”{multiple:true}”，但不管怎么调整都没效果，控制台也没报错…

我的代码结构是这样的：


<div data-uk-accordion>
  <div class="uk-accordion-title">标题1</div>
  <div class="uk-accordion-content">内容1</div>
  <!-- 其他面板重复 -->
</div>

尝试过把属性写到每个面板项里，也试过用JavaScript初始化，但都不行。难道是版本问题？我用的是UIkit3.8.6…

UIkit UI框架前端框架

我来解答赞 10 收藏

反馈

2 条解答

朝曦酱~ Lv1

你用的是 UIkit 3，但写的是 UIkit 2 的属性，怪不得没效果。我一般直接改成这样：

<div uk-accordion="multiple: true">

  <div class="uk-accordion-title">标题1</div>

  <div class="uk-accordion-content">内容1</div>

  <div class="uk-accordion-title">标题2</div>

  <div class="uk-accordion-content">内容2</div>

</div>

UIkit 3 的属性改成了 uk-accordion，别再用 data-uk-accordion 了，文档记得看清楚版本。

2026-02-20 05:01

玉戈（打工版） Lv1

你的问题确实可能是版本相关的，或者配置方式有点小问题。我之前也遇到过类似的情况，UIkit的手风琴组件有时候会因为细节没注意而不起作用。

首先确认一下：data-uk-accordion="{multiple: true}" 是正确的写法，但需要确保你用的是最新版的 UIkit（3.8.6 应该没问题）。如果还是不行，试试下面的方法：

1. 确保你引入的 CSS 和 JS 文件是同一个版本的，不要混用不同版本。
2. 用 JavaScript 手动初始化试试：

UIkitAccordion = UIkit.accordion(document.querySelector('[data-uk-accordion]'), { multiple: true });

把这个代码放到页面加载完成后运行（比如放在 window.onload 或 jQuery 的 $(document).ready() 里）。

如果还是没效果，可以检查一下是不是其他样式或脚本冲突了。顺便提醒一下，UIkit 的文档有时候也不是特别清楚，多试几次就对了。希望能帮到你！

2026-02-02 06:06