Foundation 6 手风琴不工作
Foundation 6 Accordion Not Working
能否请您帮助我无法正常工作的 Foundation 6 Accordion 相同代码。我不确定我错过了什么。此外,我将所有 js 和 css 文件都放在同一目录中。
<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>
如果有人尽早对此提供帮助,我们将不胜感激。
好的,所以对我来说它工作得很好,刚刚检查过。您缺少一些 类,这是您的主要问题。
首先:
The container for an accordion
needs the class .accordion
, and the
attributes data-accordion
and role="tablist"
. Note that in these
examples, we use a <ul>
, but you can use any element you want.
在您的代码中,ul 标签中没有 role=tablist
。
其次,您在 <a></a>
和 <div></div>
中遗漏了很多东西
您没有 aria-controls
或 data-tab-content aria-labelledby
关于<a></a>
The tab title needs role="tab", an href, a unique ID, and
aria-controls.
关于<div></div>
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>
如果你需要还有我的代码,我已经用它来检查是否一切正常。
<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>
以后检查这个 link。这对你应该很有帮助。
能否请您帮助我无法正常工作的 Foundation 6 Accordion 相同代码。我不确定我错过了什么。此外,我将所有 js 和 css 文件都放在同一目录中。
<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>
如果有人尽早对此提供帮助,我们将不胜感激。
好的,所以对我来说它工作得很好,刚刚检查过。您缺少一些 类,这是您的主要问题。
首先:
The container for an
accordion
needs the class.accordion
, and the attributesdata-accordion
androle="tablist"
. Note that in these examples, we use a<ul>
, but you can use any element you want.
在您的代码中,ul 标签中没有 role=tablist
。
其次,您在 <a></a>
和 <div></div>
您没有 aria-controls
或 data-tab-content aria-labelledby
关于<a></a>
The tab title needs role="tab", an href, a unique ID, and aria-controls.
关于<div></div>
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>
如果你需要还有我的代码,我已经用它来检查是否一切正常。
<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>
以后检查这个 link。这对你应该很有帮助。