Foundation 6手风琴无法正常工作 [英] Foundation 6 Accordion Not Working
问题描述
请帮我在Foundation 6 Accordion下面的相同代码中提供帮助，使我无法正常工作。我不确定我缺少什么。另外，我将所有js和css文件都放在同一目录中。
Could you please help on below Foundation 6 Accordion sameple code where I could not able get it worked. I am not sure what I am missing. Also, I kept all js and css files are in the same directory.
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="jquery.js"></script>
<script src="foundation.js"></script>
<script src="foundation.accordion.js"></script>
<link rel="stylesheet" href="foundation.css" />
<script>
$(document).foundation();
</script>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</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 id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#panel11a">Question 1</a>
<div id="panel11a" class="content">
Answer 1
</div>
</li>
<li class="accordion-navigation">
<a href="#panel12a">Question 2</a>
<div id="panel12a" class="content">
Answer 2
</div>
</li>
<li class="accordion-navigation">
<a href="#panel13a">Question 3</a>
<div id="panel13a" class="content">
Answer 3
</div>
</li>
</ul>
</div>
</body>
</html>
如果有人最早对此提供帮助，则表示感谢。
Appreciated if someone help on this at the earliest.
推荐答案
好的，对我来说，它工作得很好，只需检查一下即可。您缺少一些课程，这是您的主要问题。
Okay, so for me it works perfectly, just checked. You had some missing classes and that was your main problem.
首先：
手风琴的容器需要类.accordion和
属性数据手风琴和role = tablist。请注意，在这些
示例中，我们使用< ul>，但是您可以使用任何想要的元素。
The container for an
accordionneeds the class.accordion, and the attributesdata-accordionandrole="tablist". Note that in these examples, we use a<ul>, but you can use any element you want.
在您的代码中，ul标签中没有 role = tablist 。
In your code there is no role=tablist in ul tag.
第二件事是您在< a>< / a> 和< div>< / div>
例如，您没有 aria-controls 或 data-tab-content aria-标签为
关于< / a> ;
标签标题需要role = tab，href，唯一ID和
aria-controls。
The tab title needs role="tab", an href, a unique ID, and aria-controls.
关于< div>< / div>
内容窗格需要一个与上述href，
role = tabpanel，data-tab-
The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby.
您的示例：
<div class="row row-padding small-12">
<ul class="accordion" data-accordion role="tablist">
<li class="accordion-navigation">
<a href="#panel11a" role="tab" class="accordion-title" id="panel11a-heading" aria-controls="panel11a">Accordion 1</a>
<div id="panel11a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel11a-heading">
Answer 1
</div>
</li>
<li class="accordion-navigation">
<a href="#panel12a" role="tab" class="accordion-title" id="panel12a-heading" aria-controls="panel12a">Accordion 2</a>
<div id="panel12a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel12a-heading">
Answer 2
</div>
</li>
<li class="accordion-navigation">
<a href="#panel13a" role="tab" class="accordion-title" id="panel13a-heading" aria-controls="panel13a">Accordion 3</a>
<div id="panel13a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel13a-heading">
Answer 3
</div>
</li>
</ul>
</div>
如果您还需要我的代码，我就用它来检查是否全部正常。 / p>
If you need there is also my code, I have used it to check if it all works.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="scripts/foundation.css" rel="stylesheet" />
</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 role="tablist">
<li class="accordion-navigation">
<a href="#panel11a" role="tab" class="accordion-title" id="panel11a-heading" aria-controls="panel11a">Accordion 1</a>
<div id="panel11a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel11a-heading">
Answer 1
</div>
</li>
<li class="accordion-navigation">
<a href="#panel12a" role="tab" class="accordion-title" id="panel12a-heading" aria-controls="panel12a">Accordion 1</a>
<div id="panel12a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel12a-heading">
Answer 2
</div>
</li>
<li class="accordion-navigation">
<a href="#panel13a" role="tab" class="accordion-title" id="panel13a-heading" aria-controls="panel13a">Accordion 1</a>
<div id="panel13a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel13a-heading">
Answer 3
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/foundation.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.1.1/js/foundation.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
以后请检查此链接。
这篇关于Foundation 6手风琴无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
