无法使Zurb Foundation手风琴工作

Question

I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. 我正在使用Zurb's Foundation，尝试使用手风琴js构建FAQ页面。 But it's not working and I have no idea why. 但这不起作用，我也不知道为什么。 All the js files are in the js folder. 所有的js文件都在js文件夹中。 Here's my whole page: 这是我的整个页面：

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

I'm brand new to HTML websites, so sorry if it's something stupid. 我是HTML网站的新手，如果这太蠢了，请对不起。

Answer 1

You are targeting your accordion with an id that doesn't exist in your HTML. 您将使用HTML中不存在的id来定位您的手风琴。

You'll need to add the id to your HTML like this: 您需要像这样将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>

Also change the order of your scripts so that your custom accordion loads after everything else. 还可以更改脚本的顺序，以便自定义手风琴可以在其他所有内容之后加载。

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

Here is a working CodePen: http://codepen.io/anon/pen/jPmRyB 这是一个工作的CodePen： http ://codepen.io/anon/pen/jPmRyB

Answer 2

You forgot about $(document).foundation(); 您忘记了$（document）.foundation（）;

http://foundation.zurb.com/docs/javascript.html - Initialize Foundation http://foundation.zurb.com/docs/javascript.html-初始化基金会

无法使Zurb Foundation手风琴工作

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-06-09 13:51:08

解决方案2
0 2015-06-08 20:16:09

无法使Zurb Foundation手风琴工作

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-06-09 13:51:08

解决方案2 0 2015-06-08 20:16:09

解决方案1
1 已采纳 2015-06-09 13:51:08

解决方案2
0 2015-06-08 20:16:09