折叠列表（Accordion）

Posted on 9 月 21, 2026 by

一、折叠列表概述

折叠列表（Accordion）允许用户通过点击列表项标题来展开或收起下方隐藏的内容，适合用于 FAQ、新闻摘要、内容目录等场景。

核心结构

元素类 / 属性作用
<ul>.accordion + data-accordion容器，声明折叠组件
<li>.accordion-navigation每个可折叠项
<a>href="#对应id"点击触发按钮，通过 href 关联内容
<div>.content + id实际折叠内容区，id 与 <a> 的 href 对应

必须初始化 Foundation JS：$(document).foundation();

二、基础折叠列表

<ul class="accordion" data-accordion>
    <li class="accordion-navigation">
        <a href="#demo">美国新型艾滋疫苗 猴子实验显示疫苗有效</a>
        <div id="demo" class="content">
            新华社华盛顿12月27日电美国研究人员最近开发出一种新型艾滋病疫苗，猴子实验显示，接种这种疫苗能保护它们免受与人艾滋病病毒相似病毒的感染。这为防治艾滋病带来了新希望。

            美国斯克里普斯研究所等机构研究人员近日在美国学术刊物《免疫》上报告了相关成果。他们针对艾滋病病毒蛋白质外壳上的弱点开发了这种疫苗，疫苗会引发免疫系统产生一种抗体，该抗体能够攻击病毒相关弱点，从而起到保护作用。
        </div>
    </li>
</ul>Code language: HTML, XML (xml)

点击列表标题即可展开/收起内容区域。

三、手风琴效果（多项折叠）

通过添加多个 <li> 项，每项使用独立的 id 和对应的 <a href>，即可实现手风琴效果——一次展开一项，点击其他项时当前项自动收起。

默认展开某一项

为 .content 添加 .active 类，可使该项在页面加载时默认展开。

<ul class="accordion" data-accordion>
    <li class="accordion-navigation">
        <a href="#demo">中国高速公路总里程突破14万公里</a>
        <div id="demo" class="content active">
            28日，随着龙（川）怀（集）和仁（化）博（罗）两条高速公路建成通车，为广东省新增两条出省通道，也使广东省高速公路通车里程达到了9002公里。至此，我国高速公路总里程突破14万公里。

            据介绍，2018年，我国新增公路通车里程8.6万公里，其中高速公路6000公里，新建改建国省干线公路2万公里。根据明年预期目标，要完成公路水路固定资产投资1.8万亿元左右；新改建农村公路20万公里，实现具备条件的乡镇、建制村通硬化路；新增通客车建制村5000个，其中贫困地区3000个。 （记者齐中熙）
        </div>
    </li>
    <li class="accordion-navigation">
        <a href="#demo2">C919国产大型客机103架机首飞成功</a>
        <div id="demo2" class="content">
            人民日报北京12月28日电 （记者 余建斌）记者从中国商用飞机有限责任公司获悉：28日12时45分，C919国产大型客机103架机平安降落在上海浦东国际机场，圆满完成第一次飞行，标志着目前共有三架C919飞机进入试飞状态。

            此次飞行后，C919飞机103架机将适时转场西安阎良，开展颤振、空速校准、载荷、操稳和性能等科目的试飞。目前，C919飞机两架试飞机在西安阎良、山东东营和江西南昌开展多地同步试验试飞。另外三架试飞机正按计划进行部装、总装，六架试飞飞机计划明年全部投入试飞取证工作。
        </div>
    </li>
    <li class="accordion-navigation">
        <a href="#demo3">俄英计划逐步恢复因中毒事件驱逐的双方使馆外交人员数量</a>
        <div id="demo3" class="content">
            俄罗斯驻英国大使雅科文科28日说，俄英两国计划从明年1月开始，逐步恢复因俄前情报人员中毒事件双方互相驱逐的使馆外交人员的数量。

            雅科文科当天在"俄罗斯-24"电视台节目中说，根据两国达成的原则性协议，明年1月起逐步恢复派驻在莫斯科和伦敦的外交人员数量。不过，是否能恢复到驱逐外交官事件之前的水平还不确定，但至少可以恢复到此前一半的水平。
        </div>
    </li>
</ul>Code language: HTML, XML (xml)

四、完整可运行示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation 折叠列表示例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
    <style>
        .accordion {
            margin-bottom: 20px;
        }
        .content {
            padding: 15px;
            line-height: 1.6;
        }
    </style>
</head>
<body>

<div class="row">
    <div class="medium-12 columns">

        <h3>基础折叠列表</h3>
        <ul class="accordion" data-accordion>
            <li class="accordion-navigation">
                <a href="#demo1">美国新型艾滋疫苗 猴子实验显示疫苗有效</a>
                <div id="demo1" class="content">
                    新华社华盛顿12月27日电美国研究人员最近开发出一种新型艾滋病疫苗，猴子实验显示，接种这种疫苗能保护它们免受与人艾滋病病毒相似病毒的感染。这为防治艾滋病带来了新希望。

                    美国斯克里普斯研究所等机构研究人员近日在美国学术刊物《免疫》上报告了相关成果。他们针对艾滋病病毒蛋白质外壳上的弱点开发了这种疫苗，疫苗会引发免疫系统产生一种抗体，该抗体能够攻击病毒相关弱点，从而起到保护作用。
                </div>
            </li>
        </ul>

        <hr />

        <h3>手风琴效果（多项 + 默认展开第一项）</h3>
        <ul class="accordion" data-accordion>
            <li class="accordion-navigation">
                <a href="#demo2">中国高速公路总里程突破14万公里</a>
                <div id="demo2" class="content active">
                    28日，随着龙（川）怀（集）和仁（化）博（罗）两条高速公路建成通车，为广东省新增两条出省通道，也使广东省高速公路通车里程达到了9002公里。至此，我国高速公路总里程突破14万公里。

                    据介绍，2018年，我国新增公路通车里程8.6万公里，其中高速公路6000公里，新建改建国省干线公路2万公里。根据明年预期目标，要完成公路水路固定资产投资1.8万亿元左右；新改建农村公路20万公里，实现具备条件的乡镇、建制村通硬化路；新增通客车建制村5000个，其中贫困地区3000个。 （记者齐中熙）
                </div>
            </li>
            <li class="accordion-navigation">
                <a href="#demo3">C919国产大型客机103架机首飞成功</a>
                <div id="demo3" class="content">
                    人民日报北京12月28日电 （记者 余建斌）记者从中国商用飞机有限责任公司获悉：28日12时45分，C919国产大型客机103架机平安降落在上海浦东国际机场，圆满完成第一次飞行，标志着目前共有三架C919飞机进入试飞状态。

                    此次飞行后，C919飞机103架机将适时转场西安阎良，开展颤振、空速校准、载荷、操稳和性能等科目的试飞。目前，C919飞机两架试飞机在西安阎良、山东东营和江西南昌开展多地同步试验试飞。另外三架试飞机正按计划进行部装、总装，六架试飞飞机计划明年全部投入试飞取证工作。
                </div>
            </li>
            <li class="accordion-navigation">
                <a href="#demo4">俄英计划逐步恢复因中毒事件驱逐的双方使馆外交人员数量</a>
                <div id="demo4" class="content">
                    俄罗斯驻英国大使雅科文科28日说，俄英两国计划从明年1月开始，逐步恢复因俄前情报人员中毒事件双方互相驱逐的使馆外交人员的数量。

                    雅科文科当天在"俄罗斯-24"电视台节目中说，根据两国达成的原则性协议，明年1月起逐步恢复派驻在莫斯科和伦敦的外交人员数量。不过，是否能恢复到驱逐外交官事件之前的水平还不确定，但至少可以恢复到此前一半的水平。
                </div>
            </li>
        </ul>

    </div>
</div>

</body>
</html>Code language: HTML, XML (xml)

五、使用要点小结

功能实现方式
创建折叠列表<ul class="accordion" data-accordion>
折叠项<li class="accordion-navigation">
触发按钮<a href="#id"> 关联内容区
内容区域<div id="id" class="content">
默认展开为 .content 添加 .active 类
手风琴（互斥展开）多个 <li> 项共用同一 <ul> 容器，Foundation 自动管理
JS 初始化$(document).foundation()
Posted in Foundation教程

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注