Foundation 基础
Foundation 教程
Foundation 安装
Foundation 按钮
Foundation 按钮组
Foundation 标签
Foundation 表单
Foundation 表格
Foundation 侧边栏
Foundation 顶部导航栏
Foundation 分页
Foundation 滑动导航
Foundation 滑块
Foundation 价格表
Foundation 进度条
Foundation 均衡器(Equalizer)
Foundation 开关
Foundation 列表
Foundation 麦哲伦（Magellan）导航
Foundation Joyride
Foundation 面板
Foundation 模态框
Foundation 输入框 尺寸
Foundation 提示框
Foundation 提醒框
Foundation 图标
Foundation 图片
Foundation 文本
Foundation 下拉菜单
Foundation 选项卡
Foundation 折叠列表
Foundation 手册
Foundation CSS 参考手册
Foundation CSS 可见性
Foundation 图标参考手册
Foundation 网格
Foundation 块状网格
Foundation 网格 - 大型设备
Foundation 网格 - 水平堆叠
Foundation 网格 - 小型设备
Foundation 网格 - 中型设备
Foundation 网格实例
Foundation 网格系统
©
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben
Figuren
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>实例预览 »
关于我们 联系我们 留言板
手册网