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

我花了一段时间来弄明白，但我得到的例子是：

Section - 您发布的示例似乎只与版本4.x上的Foundation合作。

请参阅this示例。 （请注意我使用的外部资源）

版本＆gt;基金会有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网站获取不同版本的基础

Answer 2

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

你应该非常小心格式化。

手风琴不在基金会工作

2 个答案: