Question

在我的项目中，我成功使用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上的文档显示了它应该如何运作......

Answer 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>

Answer 2

我有同样的问题......我找到了答案：）

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

所以它有效：）

另请参阅您提供的文档页面的源代码，您将找到技巧; - ）

希望它会对你有所帮助。

基本的UIKit（getuikit）手风琴不起作用

2 个答案: