Foundation 6 Accordion Not Working

问题

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.

回答1:

Okay, so for me it works perfectly, just checked. You had some missing classes and that was your main problem.

Firstly:

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.

In your code there is no role=tablist in ul tag.

Second thing is that you are missing a lot in your <a></a> and <div></div>

You don't have for example aria-controls or data-tab-content aria-labelledby

About <a></a>

The tab title needs role="tab", an href, a unique ID, and aria-controls.

About <div></div>

The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby.

Your example:

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

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>

In the future check this link. This should be very helpful for you.

zurb-accordion

来源：https://stackoverflow.com/questions/34673346/foundation-6-accordion-not-working

标签

accordion

zurb-foundation-6