javascript - Accordion 在 Foundation 中不起作用

Question

我正在尝试在 Foundation(版本 5.5.0)中设置 Accordion 的格式，但它只显示每个部分的标题，而无法访问下面的内容。我究竟做错了什么？我的 html 如下:

HTML

<div class="section-container accordion" data-section="accordion">
    <section class="active">
        <p class="title" data-section-title><a href="#">Section 1</a>
        </p>
        <div class="content" data-section-content>
            <p>Content of section 1.</p>
        </div>
    </section>
    <section>
        <p class="title" data-section-title><a href="#">Section 2</a>
        </p>
        <div class="content" data-section-content>
            <p>Content of section 2.</p>
        </div>
    </section>
</div>

Javascript

$(document).foundation();

Example

Answer 1

我花了一段时间才弄明白，但我让这个例子起作用了:

Section -您发布的示例似乎仅适用于版本 4.x 的 Foundation。

参见 this例子。 (注意我使用的外部资源)

在 Foundation > 4 版本中有一个 accordion -功能:

HTML

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
      <a href="#panel1a">Accordion 1</a>
       <div id="panel1a" class="content active">...</div>
  </li>
//and so on   
</ul>

Javascript

$(document).ready(function(){
    $(document).foundation();
});

Demo

附言我用了 this获取不同版本基础的网站