Foundation 折叠列表 - 学习 Foundation 5

折叠列表用于隐藏部分内容的显示

.accordion 类和 data-accordion 属性用于创建一个可折叠的元素

.accordion-navigation 类用于渲染可折叠元素

实际的内容在 .content 类 ( <div class="content" ) 中，点击按钮既可以显示

可以在列表项中添加 <a> 元素来控制（显示/隐藏）可折叠的内容

然后锚链接使用与可折叠内容内容相同的 id (<a href=#demo" 与 <div id="demo"> 相关联

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

<ul class="accordion" data-accordion>
    <li class="accordion-navigation">
        <a href="#demo">Simple Collapsible</a>
        <div id="demo" class="content">简单教程</div>
    </li>
</ul>
<script>
$(document).ready(function() {$(document).foundation();})</script>

运行范例 »

默认情况下，可折叠内容是隐藏的

通过在 <div>上添加 .active CSS 类让其默认是显示的

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

运行范例 »