无法让 Zurb Foundation 手风琴工作

Question

我正在使用 Zurb 的 Foundation，尝试使用 accordion js 构建一个常见问题解答页面。但它不起作用，我不知道为什么。所有的 js 文件都在 js 文件夹中。这是我的整个页面：

<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row row-padding">
   <div class="small-12 columns"> 
    <h1>FAQ:<h1>
    </div>
 </div> 


<div class="row row-padding small-12">
    <ul class="accordion" data-accordion>
        <li class="accordion-navigation">
            <a href="#panel13a">Question</a>
            <div id="panel13a" class="content">
            Answer
            </div>
        </li>
    </ul>
</div>    
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
</body>
</html>

我是 HTML 网站的新手，如果有什么愚蠢的地方，我深表歉意。

Answer 1

您忘记了 $(document).foundation();

http://foundation.zurb.com/docs/javascript.html - 初始化基础

Answer 2

您的手风琴 id 在您的 HTML 中不存在。

您需要像这样将 id 添加到您的 HTML：

<div class="row row-padding small-12">
    <ul id="myAccordionGroup" class="accordion" data-accordion>
        <li class="accordion-navigation">
            <a href="#panel13a">Question</a>
            <div id="panel13a" class="content">
            Answer
            </div>
        </li>
    </ul>
</div>

同时更改脚本的顺序，以便您的自定义手风琴在其他所有内容之后加载。

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>

<script>
$(document).foundation();
$('#myAccordionGroup').on('toggled', function (event, accordion) {
  console.log(accordion);
});
</script>

这是一个可用的 CodePen：http://codepen.io/anon/pen/jPmRyB

无法让 Zurb Foundation 手风琴工作

Can't get Zurb Foundation accordion to work

javascript

accordion

zurb-foundation