Foundation 折叠列表
在你想隐藏部分内容的显示时，可以使用折叠列表。
实例
< li class= "accordion-navigation" >
< a href= "#demo" > Simple Collapsible < /a >
< div id= "demo" class= "content" >
云搜索MX教程 -- 学的不仅是技术，更是梦想！！！
< /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来创建：
实例
< li class= "accordion-navigation" >
< a href= "#demo" > 手风琴实例 1 < /a >
< div id= "demo" class= "content active" >
Demo 1 - 云搜索MX教程 -- 学的不仅是技术，更是梦想！！！
< /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 - 云搜索MX教程 -- 学的不仅是技术，更是梦想！！！
< /div >
< /li >
< /ul >
尝试一下 »
默认情况下，手风琴列表项有一个是打开的。如果你想关闭所有可以使用
data-options="multi_expand:true;"
属性:
