無法使Zurb Foundation手風琴工作
[英]Can't get Zurb Foundation accordion to work
問題描述
我正在使用Zurb's Foundation，嘗試使用手風琴js構建FAQ頁面。 但這不起作用，我也不知道為什么。 所有的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網站的新手，如果這太蠢了，請對不起。
2 個解決方案
解決方案1
1 已采納 2015-06-09 13:51:08
您將使用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
0 2015-06-08 20:16:09
您忘記了$（document）.foundation（）;
Zurb Foundation 5 + Rails 4：toggle-topbar無法使用
[英]Zurb Foundation 5 + Rails 4 : toggle-topbar won't work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.