无法让 Zurb Foundation 手风琴工作答案

【问题标题】：Can't get Zurb Foundation accordion to work无法让 Zurb Foundation 手风琴工作
【发布时间】：2015-06-08 15:24:54
【问题描述】：

我正在使用 Zurb 的 Foundation，尝试使用手风琴 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 网站的新手，如果有什么愚蠢的地方，请见谅。

【问题讨论】：

标签： javascript zurb-foundation accordion

【解决方案1】：

您正在使用 HTML 中不存在的 id 定位您的手风琴。

您需要像这样将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

【讨论】：

【解决方案2】：

你忘了 $(document).foundation();

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

【讨论】：