top
Loading...
Foundation 折叠列表

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>

嘗試一下 »

實例解析

.accordion 類和 data-accordion 屬性用於創建一個可折叠的元素。 .accordion-navigation 類用於渲染可折叠元素。實際的內容在 .content 類 (<div class="content") 中,點擊按鈕既可以顯示。

我們在列表項中添加 <a> 元素來控製(顯示/隱藏)可折叠的內容。然後錨鏈接使用與可折叠內容內容相同的id (<a href=#demo" 與 <div id="demo"> 相關聯)。

注意: 可折叠的傚果需要初始化 Foundation JS。

默認情況下,可折叠內容是隱藏的。我們可以通過在 <div> 上添加 .active 類讓其默認是顯示的:

實例

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

嘗試一下 »

手風琴傚果

手風琴傚果用於延展與設置可折叠內容。

手風琴傚果通過使用多個不同的錨鏈接與id來創建:

實例

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#demo">手風琴實例 1</a>
    <div id="demo" class="content active">
      Demo 1 - 教程 -- 學的不僅是技術,更是夢想!!!
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#demo2">手風琴實例 2</a>
    <div id="demo2" class="content">
      Demo 2 - Lorem ipsum dolor sit amet....
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#demo3">手風琴實例 3</a>
    <div id="demo3" class="content">
      Demo 3 - 教程 -- 學的不僅是技術,更是夢想!!!
    </div>
  </li>
</ul>

嘗試一下 »

默認情況下,手風琴列表項有一個是打開的。如果你想關閉所有可以使用 data-options="multi_expand:true;" 屬性:

實例

<ul class="accordion" data-accordion data-options="multi_expand:true;">
  ..
</ul>

嘗試一下 »
北斗有巢氏 有巢氏北斗