如何做 Foundation 6 手风琴？

Question

有人可以帮我制作 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 答案，但它们让我更加困惑，像这样：

那家伙为什么当时用了 2 个 jQuery？？！！？？

这是手风琴无法正常工作的 Codepen link：http://codepen.io/lukasdinh/pen/dXXOwz

Answer 1

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

你有

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

应该是

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

你的 javascript 还需要初始化基础

$(document).foundation();

另外两行不需要

看到这个codepen

如何做 Foundation 6 手风琴？

How to do Foundation 6 accordion?

javascript

jquery

accordion

zurb-foundation