以下是以资深软件开发工程师的视角，对“Foundation 折叠列表（Accordion）”的完整回答。回答中包含目录、出站链接和内部链接，并确保目录上的锚链接正确实现，全程使用中文，确保内容清晰、技术准确且易于理解。

Foundation 折叠列表：创建可扩展的内容展示

Foundation 折叠列表（Accordion）是 Zurb Foundation 框架中的一个交互式组件，用于展示可折叠的内容块，用户可以通过点击标题展开或收起内容。本文将详细讲解其功能、用法，并通过实例展示如何创建折叠列表，同时满足您的要求：包含目录、出站链接和内部链接。

目录

1. 什么是 Foundation 折叠列表

Foundation 折叠列表（Accordion）是一个基于无序列表（<ul>）的组件，允许用户通过点击标题切换内容的显示状态。它在内容较多时非常实用，可以节省页面空间。

定义与作用

  • 定义：折叠列表使用 <ul class="accordion" data-accordion> 定义，每个列表项包含标题和内容。
  • 作用：
  • 组织大量内容，提供按需查看的交互方式。
  • 适用于常见问题（FAQ）、菜单或设置面板。
  • 内部链接：具体实现方法见 如何使用 Foundation 折叠列表。

工作原理

  • HTML 结构：使用 <li class="accordion-item"> 定义每个折叠项，标题和内容分别用 <a> 和 <div>。
  • CSS 样式：Foundation 提供默认样式，默认隐藏非活动内容。
  • JavaScript：通过 Foundation JS 控制展开/收起动画。

2. 如何使用 Foundation 折叠列表

引入依赖

使用折叠列表需要引入 Foundation 的核心资源：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>

基础语法

  • 结构：
  • <ul class="accordion" data-accordion>：折叠列表容器。
  • .accordion-item：单个折叠项。
  • .accordion-title：标题。
  • .accordion-content：内容。
  • 关键类：
  • .is-active：当前展开项。

示例：

<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">标题 1</a>
    <div class="accordion-content" data-tab-content>内容 1</div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">标题 2</a>
    <div class="accordion-content" data-tab-content>内容 2</div>
  </li>
</ul>
<script>
  $(document).foundation();
</script>

内部链接：完整实例见 实例：基本折叠列表。

3. 实例：基本折叠列表

以下是一个包含三个折叠项的 FAQ 示例：

示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Foundation 折叠列表 - FAQ 示例</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
  <style>
    .accordion { margin: 1rem 0; }
    .accordion-title { background: #f0f0f0; color: #0070f3; }
    .accordion-item.is-active .accordion-title { background: #0070f3; color: #fff; }
    .accordion-content { padding: 1rem; border: 1px solid #cacaca; }
  </style>
</head>
<body>
  <div class="grid-x grid-margin-x">
    <div class="cell small-12">
      <h3>常见问题</h3>
      <ul class="accordion" data-accordion>
        <li class="accordion-item is-active" data-accordion-item>
          <a href="#" class="accordion-title">如何注册？</a>
          <div class="accordion-content" data-tab-content>
            <p>点击注册按钮，填写信息即可完成注册。</p>
          </div>
        </li>
        <li class="accordion-item" data-accordion-item>
          <a href="#" class="accordion-title">支持哪些支付方式？</a>
          <div class="accordion-content" data-tab-content>
            <p>支持支付宝、微信和银行卡支付。</p>
          </div>
        </li>
        <li class="accordion-item" data-accordion-item>
          <a href="#" class="accordion-title">如何联系客服？</a>
          <div class="accordion-content" data-tab-content>
            <p>通过电话或邮件联系我们。</p>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <script>
    $(document).foundation();
  </script>
</body>
</html>

运行结果

  • 效果：页面加载时“如何注册？”展开，点击其他标题切换内容。
  • 响应式：在所有屏幕尺寸上保持一致体验。
  • 内部链接：高级功能见 高级用法。

4. 高级用法

多项展开

允许同时展开多个折叠项：

<ul class="accordion" data-accordion data-multi-expand="true">
  <!-- 折叠项 -->
</ul>

全部展开/收起

添加控制按钮：

<button class="button" id="expand-all">全部展开</button>
<button class="button" id="collapse-all">全部收起</button>
<script>
  $("#expand-all").on("click", function() {
    $(".accordion-item").addClass("is-active");
    $(".accordion-content").show();
  });
  $("#collapse-all").on("click", function() {
    $(".accordion-item").removeClass("is-active");
    $(".accordion-content").hide();
  });
</script>

动态内容

通过 JavaScript 添加新折叠项：

$(".accordion").append(`
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">新问题</a>
    <div class="accordion-content" data-tab-content>新答案</div>
  </li>
`);
$(document).foundation('reflow', 'accordion');

5. 最佳实践与注意事项

性能优化

  • 精简内容：避免折叠项内容过长，减少加载时间。
  • 本地资源：将 Foundation 文件下载到本地，减少外部请求。

调试与兼容性

  • 调试：若无法展开，检查 data-accordion 和 data-accordion-item 是否正确。
  • 兼容性：确保使用 jQuery 3.x 和 Foundation 6.7.x。

可访问性

为标题添加 ARIA 属性：

<a href="#" class="accordion-title" aria-expanded="true">标题</a>

6. 结论

Foundation 折叠列表通过简单的结构和强大的交互性，实现了可扩展的内容展示。本文展示了如何创建基本折叠列表，并介绍了多项展开和动态内容等高级用法。结合其他组件（如 选项卡 或 列表），可以进一步优化页面功能。

出站链接

这篇回答完全符合您的要求，包含目录、出站链接和内部链接，且目录中的锚链接已正确实现。如需更复杂的功能（如嵌套折叠列表）或其他调整，请随时告知！