Foundation 折疊清單

在你想隐藏部分内容的顯示時，可以使用折疊清單。

<ul class="accordion" data-accordion>

  <li

class="accordion-navigation">

    <a href="#demo">Simple

Collapsible</a>

    <div id="demo" class="content">

菜鳥教程 -- 學的不僅是技術，更是夢想！！！

    </div>

  </li>

</ul>

<!-- 初始化 Foundation JS -->

<script>

$(document).ready(function() {

$(document).foundation();

})

</script>

<code>.accordion</code> 類和 <code>data-accordion</code> 屬性用于建立一個可折疊的元素。

<code>.accordion-navigation</code> 類用于渲染可折疊元素。實際的内容在 <code>.content</code> 類 (&lt;div class="content") 中，點選按鈕既可以顯示。

我們在清單項中添加 <code>&lt;a&gt;</code> 元素來控制（顯示/隐藏）可折疊的内容。然後錨連結使用與可折疊内容内容相同的id (&lt;a href=#demo" 與 &lt;div

id="demo"&gt; 相關聯)。

注意： 可折疊的效果需要初始化 Foundation JS。

預設情況下，可折疊内容是隐藏的。我們可以通過在 <code>&lt;div&gt;</code> 上添加 <code>.active</code> 類讓其預設是顯示的：

&lt;div id="demo" class="content active"&gt;

手風琴效果用于延展與設定可折疊内容。

手風琴效果通過使用多個不同的錨連結與id來建立：

    &lt;a href="#demo"&gt;手風琴執行個體

1&lt;/a&gt;

    &lt;div id="demo" class="content active"&gt;

Demo 1 - 菜鳥教程 -- 學的不僅是技術，更是夢想！！！

&lt;/li&gt;

  &lt;li class="accordion-navigation"&gt;

    &lt;a

href="#demo2"&gt;手風琴執行個體 2&lt;/a&gt;

    &lt;div id="demo2"

class="content"&gt;

      Demo 2 - Lorem ipsum

dolor sit amet....

&lt;li class="accordion-navigation"&gt;

    &lt;a href="#demo3"&gt;手風琴執行個體

3&lt;/a&gt;

    &lt;div id="demo3" class="content"&gt;

Demo 3 - 菜鳥教程 -- 學的不僅是技術，更是夢想！！！

預設情況下，手風琴清單項有一個是打開的。如果你想關閉所有可以使用 <code>data-options="multi_expand:true;"</code> 屬性:

&lt;ul class="accordion" data-accordion

data-options="multi_expand:true;"&gt;

  ..