Foundation 6 手风琴不工作答案

【问题标题】：Foundation 6 Accordion Not WorkingFoundation 6 手风琴不工作
【发布时间】：2016-01-08 09:20:15
【问题描述】：

请您帮忙解决我无法使其工作的 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>

如果有人尽早提供帮助，我们将不胜感激。

【问题讨论】：

标签： accordion zurb-foundation-6

【解决方案1】：

好的，所以对我来说它工作得很好，刚刚检查过。您缺少一些课程，这是您的主要问题。

首先：

accordion 的容器需要 .accordion 类，并且属性data-accordion 和role="tablist"。请注意，在这些例如，我们使用<ul>，但您可以使用任何您想要的元素。

在您的代码中，ul 标记中没有 role=tablist。

第二件事是你在<a></a> 和<div></div> 中遗漏了很多东西

例如，您没有 aria-controls 或 data-tab-content aria-labelledby

关于<a></a>

标签标题需要 role="tab"、href、唯一 ID 和咏叹调控件。

关于<div></div>

内容窗格需要一个与上述 href 匹配的 ID， role="tabpanel"、data-tab-content 和 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>

以后请检查此链接。这应该对你很有帮助。

zurb-accordion

【讨论】：

效果很好。感谢慕尼黑的快速支持。