手风琴在 Foundation 中不起作用

Question

我正在尝试在 Foundation（版本 5.5.0）中格式化手风琴，但它只显示每个部分的标题，而无法访问下面的内容。我究竟做错了什么？我的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

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

你真的应该小心格式化。

Answer 2

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

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

版本

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

P.S。我使用 this 站点获取不同版本的基础

手风琴在 Foundation 中不起作用

Accordion not working in Foundation

html

javascript

css

jquery

zurb-foundation