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