# 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` 类 (&lt;div class="content") 中，点击按钮既可以显示。 我们在列表项中添加 `&lt;a&gt;` 元素来控制（显示/隐藏）可折叠的内容。然后锚链接使用与可折叠内容内容相同的id (&lt;a href=#demo" 与 &lt;div id="demo"&gt; 相关联)。 **注意：** 可折叠的效果需要初始化 Foundation JS。 默认情况下，可折叠内容是隐藏的。我们可以通过在 `&lt;div&gt;` 上添加 `.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> ```