Foundation 6 手风琴怎么做？答案

【问题标题】：How to do Foundation 6 accordion?Foundation 6 手风琴怎么做？
【发布时间】：2016-06-15 17:50:28
【问题描述】：

有人可以帮我制作 Foundation 6 手风琴吗？我基本上从文档中复制并粘贴了代码，但这太令人困惑了。我不知道我在这里做错了什么。

来自文档的 HTML：

<ul class="accordion" data-accordion id="accordion">
  <li class="accordion-item is-active" data-accordion-item>
    <a role="tab" href="#" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content role="tabpanel">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a role="tab" href="#" class="accordion-title">Accordion 2</a>
    <div class="accordion-content" data-tab-content role="tabpanel">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a role="tab" href="#" class="accordion-title">Accordion 3</a>
    <div class="accordion-content data-tab-content" role="tabpanel">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
</ul>

因为代码不起作用，我检查了他们的网站并添加了诸如 role="tab" 和一些在他们的代码中但不在文档中的 data-* 属性。

Javascript：

// $(document).foundation();
var el = document.getElementById("accordion");
var elem = new Foundation.Accordion(el, options);

第一行被注释掉是因为它不能使用它（我只是自动假设它总是需要的），但文档中没有提到它，所以..我猜它在那里是多余的？

我试图在这里查看其他一些 SO 答案，但它们让我更加困惑，例如：Foundation 6 Accordion Not Working

为什么那个人当时使用 2 个 jQuerys??!!??

这里是手风琴不起作用的 Codepen 链接：http://codepen.io/lukasdinh/pen/dXXOwz

【问题讨论】：

标签： javascript jquery zurb-foundation accordion

【解决方案1】：

您的第三个手风琴标签中有错字

你有

<div class="accordion-content data-tab-content" role="tabpanel">

应该是

<div class="accordion-content" data-tab-content role="tabpanel">

你的 javascript 也只需要初始化基础

$(document).foundation();

其他两行不需要

看到这个codepen

【讨论】：