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>
<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
類讓其默認是顯示的:
手風琴傚果
手風琴傚果用於延展與設置可折叠內容。
手風琴傚果通過使用多個不同的錨鏈接與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>
<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;"
屬性: