Foundation 折叠列表

Foundation 折叠列表（Accordion）是一种可展开/收起的内容组件，常用于 FAQ、内容分组等场景。本章将介绍折叠列表的各种用法。

基本折叠列表

使用 .accordion 类和 data-accordion 属性创建折叠列表：

<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>

多面板展开

使用 data-multi-expand="true" 允许同时展开多个面板：

<ul class="accordion" data-accordion data-multi-expand="true">
    <li class="accordion-item is-active" 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 is-active" 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" data-accordion-item>
        <a href="#" class="accordion-title">面板 3</a>
        <div class="accordion-content" data-tab-content>
            <p>点击展开这个面板。</p>
        </div>
    </li>
</ul>

全部可收起

使用 data-allow-all-closed="true" 允许关闭所有面板：

<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>
</ul>

嵌套折叠列表

<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>
            <p>外层面板的内容。</p>
            <ul class="accordion" data-accordion data-allow-all-closed="true">
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">嵌套面板 A</a>
                    <div class="accordion-content" data-tab-content>
                        <p>嵌套面板 A 的内容。</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">嵌套面板 B</a>
                    <div class="accordion-content" data-tab-content>
                        <p>嵌套面板 B 的内容。</p>
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">外层面板 2</a>
        <div class="accordion-content" data-tab-content>
            <p>外层面板 2 的内容。</p>
        </div>
    </li>
</ul>

自定义样式

带边框的折叠列表

<style>
    .accordion.bordered {
        border: 1px solid #e6e6e6;
        border-radius: 4px;
    }
    .accordion.bordered .accordion-item {
        border-bottom: 1px solid #e6e6e6;
    }
    .accordion.bordered .accordion-item:last-child {
        border-bottom: none;
    }
    .accordion.bordered .accordion-title {
        border: none;
    }
</style>

<ul class="accordion bordered" data-accordion>
    <!-- 折叠项 -->
</ul>

带图标的标题

<style>
    .accordion-title.with-icon {
        position: relative;
        padding-right: 40px;
    }
    .accordion-title.with-icon::after {
        content: '+';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        transition: transform 0.3s;
    }
    .is-active > .accordion-title.with-icon::after {
        content: '−';
    }
</style>

<ul class="accordion" data-accordion>
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title with-icon">带图标的标题</a>
        <div class="accordion-content" data-tab-content>
            <p>点击标题展开/收起内容。</p>
        </div>
    </li>
</ul>

彩色折叠列表

<style>
    .accordion.colored .accordion-title {
        background: #1779ba;
        color: white;
    }
    .accordion.colored .accordion-title:hover {
        background: #126195;
    }
    .accordion.colored .accordion-content {
        background: #f4f4f4;
    }
</style>

<ul class="accordion colored" data-accordion>
    <!-- 折叠项 -->
</ul>

FAQ 示例

<h2>常见问题</h2>
<ul class="accordion" data-accordion data-allow-all-closed="true">
    <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>
    <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>
            <ul>
                <li>在线客服：点击页面右下角的客服图标</li>
                <li>邮箱：support@example.com</li>
                <li>电话：400-123-4567</li>
            </ul>
        </div>
    </li>
</ul>

深度链接

使用 data-deep-link="true" 支持 URL 哈希链接：

<ul class="accordion" data-accordion data-deep-link="true" data-deep-link-smudge="true" data-update-history="true">
    <li class="accordion-item" data-accordion-item>
        <a href="#panel1" class="accordion-title" id="panel1-heading">面板 1</a>
        <div class="accordion-content" data-tab-content id="panel1">
            <p>可以通过 URL #panel1 直接打开此面板。</p>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#panel2" class="accordion-title" id="panel2-heading">面板 2</a>
        <div class="accordion-content" data-tab-content id="panel2">
            <p>可以通过 URL #panel2 直接打开此面板。</p>
        </div>
    </li>
</ul>

配置选项

选项	说明	默认值
data-multi-expand	允许多个面板同时展开	false
data-allow-all-closed	允许所有面板关闭	false
data-deep-link	启用深度链接	false
data-update-history	更新浏览器历史	false
data-slide-speed	动画速度（毫秒）	250

JavaScript API

获取实例

var accordion = new Foundation.Accordion($('#my-accordion'));

方法

// 展开指定面板
accordion.down($('#panel1'));

// 收起指定面板
accordion.up($('#panel1'));

// 切换指定面板
accordion.toggle($('#panel1'));

事件

$('#my-accordion').on('down.zf.accordion', function(event) {
    console.log('面板展开:', event.target);
});

$('#my-accordion').on('up.zf.accordion', function(event) {
    console.log('面板收起:', event.target);
});

完整示例

<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 折叠列表示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        /* 带边框样式 */
        .accordion.bordered {
            border: 1px solid #e6e6e6;
            border-radius: 4px;
        }
        .accordion.bordered .accordion-item {
            border-bottom: 1px solid #e6e6e6;
        }
        .accordion.bordered .accordion-item:last-child {
            border-bottom: none;
        }

        /* 带图标样式 */
        .accordion.with-icons .accordion-title {
            position: relative;
            padding-right: 40px;
        }
        .accordion.with-icons .accordion-title::after {
            content: '+';
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            font-weight: bold;
            color: #1779ba;
        }
        .accordion.with-icons .is-active > .accordion-title::after {
            content: '−';
        }

        /* 彩色样式 */
        .accordion.primary-theme .accordion-title {
            background: #1779ba;
            color: white;
        }
        .accordion.primary-theme .accordion-title:hover {
            background: #126195;
        }

        /* FAQ 样式 */
        .faq-accordion .accordion-title {
            font-weight: bold;
        }
        .faq-accordion .accordion-content {
            color: #666;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 折叠列表展示</h1>

        <div class="demo-section">
            <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 class="demo-section">
            <h3>多面板展开</h3>
            <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">可以同时展开</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">多个面板</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 class="demo-section">
            <h3>带边框样式</h3>
            <ul class="accordion bordered" 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" data-accordion-item>
                    <a href="#" class="accordion-title">带边框的面板 3</a>
                    <div class="accordion-content" data-tab-content>
                        <p>整体有圆角边框。</p>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>带图标样式</h3>
            <ul class="accordion with-icons" data-accordion data-allow-all-closed="true">
                <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 class="demo-section">
            <h3>彩色主题</h3>
            <ul class="accordion primary-theme" 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>
            </ul>
        </div>

        <div class="demo-section">
            <h3>FAQ 常见问题</h3>
            <ul class="accordion faq-accordion" data-accordion data-allow-all-closed="true">
                <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>在登录页面点击"忘记密码"链接，输入您的注册邮箱，我们会发送密码重置链接到您的邮箱。请在24小时内点击链接重置密码。</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>
                        <ul>
                            <li>用户名和昵称</li>
                            <li>头像</li>
                            <li>联系方式</li>
                            <li>个人简介</li>
                        </ul>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">如何联系客服？</a>
                    <div class="accordion-content" data-tab-content>
                        <p>您可以通过以下方式联系我们的客服团队：</p>
                        <ul>
                            <li><strong>在线客服：</strong>点击页面右下角的客服图标</li>
                            <li><strong>邮箱：</strong>support@example.com</li>
                            <li><strong>电话：</strong>400-123-4567（工作时间 9:00-18:00）</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>嵌套折叠列表</h3>
            <ul class="accordion bordered" data-accordion>
                <li class="accordion-item is-active" data-accordion-item>
                    <a href="#" class="accordion-title">产品分类</a>
                    <div class="accordion-content" data-tab-content>
                        <ul class="accordion" data-accordion data-allow-all-closed="true">
                            <li class="accordion-item" data-accordion-item>
                                <a href="#" class="accordion-title">电子产品</a>
                                <div class="accordion-content" data-tab-content>
                                    <ul>
                                        <li>手机</li>
                                        <li>电脑</li>
                                        <li>平板</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="accordion-item" data-accordion-item>
                                <a href="#" class="accordion-title">家居用品</a>
                                <div class="accordion-content" data-tab-content>
                                    <ul>
                                        <li>家具</li>
                                        <li>厨具</li>
                                        <li>装饰品</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </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 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>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

折叠列表最佳实践

1. 合理分组：将相关内容放在同一个面板中
2. 标题清晰：使用简洁明了的标题
3. 默认展开：考虑哪些内容需要默认展开
4. 可访问性：确保键盘可以操作
5. 动画流畅：适当调整动画速度

总结

本章我们学习了：

• 基本折叠列表的创建
• 多面板展开和全部可收起
• 嵌套折叠列表
• 自定义样式（边框、图标、彩色）
• FAQ 示例
• JavaScript API 的使用

下一章，我们将学习 Foundation 列表。

---

提示：折叠列表适合用于组织大量内容，让用户按需查看，节省页面空间。