基本 UIKit (getuikit) 手风琴不起作用答案

【问题标题】：Basic UIKit (getuikit) accordion doesn't work基本 UIKit (getuikit) 手风琴不起作用
【发布时间】：2016-11-10 18:11:40
【问题描述】：

在我的项目中，我成功地使用了 UIKit（直到现在）。最近我第一次尝试使用 UIKit 手风琴，但失败了。

所以我将代码简化为这个

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="css/uikit.min.css" />
   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
   <script src="js/uikit.min.js"></script>
</head>
<body>
<div class="uk-accordion" data-uk-accordion>

    <h3 class="uk-accordion-title">Test 1</h3>
    <div class="uk-accordion-content">Whatever</div>

    <h3 class="uk-accordion-title">Test 2</h3>
    <div class="uk-accordion-content">Everything else</div>

    <h3 class="uk-accordion-title">Test 3</h3>
    <div class="uk-accordion-content">All the rest</div>

</div>
</body>
</html>

它不起作用。

我尝试了不同版本的 UIKit 和 jquery ...没有效果。

jsbin (http://jsbin.com/fusapomoze) 上的这个例子也不行

https://getuikit.com/docs/accordion.html 上的文档显示了它应该如何工作......

【问题讨论】：

标签： jquery accordion getuikit

【解决方案1】：

太简单了

文档不是很清楚，您需要在 HTML 的头部添加（一些）组件

<link rel="stylesheet" href="css/uikit.min.css" />
<link rel="stylesheet" href="css/components/accordion.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/components/accordion.min.js"></script>

【讨论】：

【解决方案2】：

我遇到了同样的问题...我找到了答案:)

您必须在页面中加载手风琴组件。在您的 JS Bin 示例中，在 uikit.min.js 之一下添加行：<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/accordion.min.js"></script>。

所以它起作用了:)

另请参阅您提供的文档页面的源代码，您会找到诀窍;-)

希望对你有所帮助。

【讨论】：

好的，在我回答之前你找到了！ ;-)