Foundation 折叠列表（Accordion）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把折叠列表（Accordion 和 Accordion Menu）讲得明明白白！Foundation 6+ 提供了两种常用折叠组件：
- Accordion：经典折叠面板（点击标题展开/收起内容），常用于 FAQ、详情页。
- Accordion Menu：带箭头的垂直折叠菜单（类似侧边栏导航），支持多级嵌套。
两者都超级易用，支持键盘导航、无障碍、动画效果！
1. 基本 Accordion（最常用）
<ulclass="accordion"data-accordiondata-allow-all-closed="true"><liclass="accordion-item"data-accordion-item><ahref="#"class="accordion-title">面板 1：标题</a><divclass="accordion-content"data-tab-content><p>这里是展开的内容，可以放文字、图片、表格等任何东西。</p></div></li><liclass="accordion-item"data-accordion-item><ahref="#"class="accordion-title">面板 2：标题</a><divclass="accordion-content"data-tab-content><p>第二个面板的内容...</p></div></li><liclass="accordion-item is-active"data-accordion-item><ahref="#"class="accordion-title">面板 3：默认展开</a><divclass="accordion-content"data-tab-content><p>加 is-active 就是默认打开的！</p></div></li></ul>关键选项：
data-allow-all-closed="true"：允许全部收起（默认只能有一个展开）data-multi-expand="true"：允许多个同时展开（和上面结合用）
2. Accordion Menu（垂直折叠菜单，带箭头）
<ulclass="vertical menu accordion-menu"data-accordion-menu><li><ahref="#">一级菜单 1</a><ulclass="menu vertical nested"><li><ahref="#">二级菜单 A</a></li><li><ahref="#">二级菜单 B</a></li></ul></li><li><ahref="#">一级菜单 2</a><ulclass="menu vertical nested"><li><ahref="#">二级菜单 C</a><ulclass="menu vertical nested"><li><ahref="#">三级菜单 1</a></li><li><ahref="#">三级菜单 2</a></li></ul></li></ul></li></ul>- 加
nested类实现多级缩进 - 支持
data-multi-expand="true"多展开
3. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"></head><body><h3>Foundation Accordion 全家福</h3><!-- 经典 Accordion --><ulclass="accordion"data-accordiondata-multi-expand="true"data-allow-all-closed="true"><liclass="accordion-item is-active"data-accordion-item><ahref="#"class="accordion-title">FAQ 问题 1：Foundation 是什么？</a><divclass="accordion-content"data-tab-content><p>Foundation 是 ZURB 开发的响应式前端框架，移动优先、灵活强大！</p></div></li><liclass="accordion-item"data-accordion-item><ahref="#"class="accordion-title">FAQ 问题 2：怎么初始化？</a><divclass="accordion-content"data-tab-content><p>引入 CSS/JS 后，$(document).foundation();</p></div></li></ul><!-- Accordion Menu --><ulclass="vertical menu accordion-menu"data-accordion-menudata-multi-expand="true"style="max-width:300px;margin-top:30px;"><li><ahref="#">仪表盘</a><ulclass="menu vertical nested"><li><ahref="#">概览</a></li><li><ahref="#">统计</a></li></ul></li><li><ahref="#">设置</a><ulclass="menu vertical nested is-active"><li><ahref="#">账户信息</a></li><li><ahref="#">隐私安全</a></li></ul></li></ul><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script><script>$(document).foundation();</script></body></html>下面给你看真实效果（官方和项目中最标准的 Foundation Accordion 示例）：
官方文档（最新版）：
- Accordion：https://get.foundation/sites/docs/accordion.html
- Accordion Menu：https://get.foundation/sites/docs/accordion-menu.html
你现在想干嘛？
→ 明天继续讲 Foundation 分页（Pagination）还是开关（Switch）？
→ 帮我做一个 5 个 FAQ 的折叠列表（带图标）？
→ 给我一个带搜索的侧边栏 Accordion Menu？
直接回复下一句：
“明天讲 pagination”
“帮我做 FAQ 折叠”
“给我侧边栏菜单”
我立刻给你写好！
