- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

HTML5 <details>与<summary>：可折叠内容的交互实践

William 发表于 2025/08/04 09:31:43 2025/08/04

【摘要】 HTML5 <details>与<summary>：可折叠内容的交互实践1. 引言在Web页面设计中，经常需要展示大量信息，但并非所有内容都需要一次性呈现给用户。例如，产品的详细参数、文章的补充说明、FAQ的答案等，这些内容在用户需要时才展开查看，既能保持页面简洁，又能提升用户体验。传统实现方式通常依赖JavaScript动态控制<div>的显示与隐藏，但这种方式代码复杂且可访问性较...

HTML5 `<details>`与`<summary>`：可折叠内容的交互实践

1. 引言

在Web页面设计中，经常需要展示大量信息，但并非所有内容都需要一次性呈现给用户。例如，产品的详细参数、文章的补充说明、FAQ的答案等，这些内容在用户需要时才展开查看，既能保持页面简洁，又能提升用户体验。传统实现方式通常依赖JavaScript动态控制<div>的显示与隐藏，但这种方式代码复杂且可访问性较差。HTML5引入的<details>和<summary>标签，为开发者提供了原生支持的可折叠内容组件，无需JavaScript即可实现交互效果，同时具备良好的语义化和可访问性。本文将深入探讨这两个标签的核心特性、使用场景及实践方法，帮助开发者构建更符合标准的Web页面。

2. 技术背景

2.1 可折叠内容的传统挑战

代码复杂度高：使用JavaScript实现折叠功能需监听点击事件、操作DOM元素的display或visibility属性，代码量大且易出错。
可访问性差：依赖JavaScript的方案可能无法被屏幕阅读器正确识别，影响视障用户的操作体验。
语义模糊：无语义的<div>和<span>标签无法表达内容的折叠意图，不利于搜索引擎理解页面结构。

2.2 `<details>`与`<summary>`的定义

标签	语义	典型场景
`<details>`	表示一个可折叠的内容块，用户可通过交互展开或收起其中的内容。	产品参数详情、FAQ答案、文章补充说明。
`<summary>`	表示`<details>`内容的标题或摘要，作为折叠块的交互入口，通常显示在折叠区域上方。	折叠块的标题（如“产品参数”“常见问题”）。

核心特性：

原生交互：无需JavaScript，通过浏览器默认行为实现展开/收起功能。
语义清晰：标签名称直接表达内容的折叠逻辑，提升代码可读性。
可访问性：屏幕阅读器能识别<details>和<summary>，为视障用户提供操作提示。

3. 应用使用场景

3.1 场景1：产品详情页的参数展示

需求：在电商产品页中，将详细参数（如尺寸、材质、保修期）折叠隐藏，用户点击“查看参数”后展开。

3.2 场景2：FAQ页面的问答交互

需求：常见问题页面中，每个问题作为标题（<summary>），点击后展开对应的答案（<details>内容）。

3.3 场景3：文章补充说明

需求：技术文档或博客文章中，将复杂的代码示例、参考资料等内容折叠，用户按需展开查看。

3.4 场景4：表单的附加选项

需求：注册表单中，将“高级选项”（如隐私协议同意、通知设置）折叠隐藏，用户点击后展开填写。

4. 不同场景下的代码实现

4.1 环境准备

工具：任意文本编辑器（VS Code/Sublime Text） + 浏览器（Chrome/Firefox/Safari）。

4.2 场景1：产品详情页的参数展示

4.2.1 代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>产品详情 - 可折叠参数</title>
    <style>
        details { 
            margin: 20px 0; 
            border: 1px solid #ddd; 
            border-radius: 5px; 
            padding: 10px; 
        }
        summary { 
            font-weight: bold; 
            cursor: pointer; 
            padding: 5px; 
            background: #f9f9f9; 
        }
        /* 自定义展开/收起图标（可选） */
        summary::marker { content: "▶ "; }
        details[open] summary::marker { content: "▼ "; }
    </style>
</head>
<body>
    <h1>智能手机 Pro Max 详细信息</h1>
    
    <!-- 基本信息（始终显示） -->
    <p>屏幕尺寸：6.7英寸 | 电池容量：5000mAh</p>
    
    <!-- 可折叠的详细参数 -->
    <details>
        <summary>查看详细参数</summary>
        <ul>
            <li><strong>处理器：</strong> 骁龙8 Gen 3</li>
            <li><strong>内存：</strong> 12GB LPDDR5</li>
            <li><strong>存储：</strong> 256GB UFS 4.0</li>
            <li><strong>摄像头：</strong> 后置三摄（50MP主摄+12MP超广角+10MP长焦）</li>
            <li><strong>保修期：</strong> 全国联保2年</li>
        </ul>
    </details>
</body>
</html>

4.2.2 原理解释

交互逻辑：用户点击<summary>（“查看详细参数”）时，浏览器默认展开或收起<details>内的内容（参数列表）。
语义化：<details>明确表示这是一个可折叠的内容块，<summary>作为交互入口，清晰传达“点击查看参数”的意图。
自定义样式：通过CSS修改summary::marker伪元素，将默认的三角形图标替换为“▶”和“▼”，提升视觉体验。

4.2.3 运行结果

初始状态：参数列表折叠隐藏，仅显示<summary>文本“查看详细参数”。
展开后：点击标题，参数列表展开显示，<summary>图标变为“▼”。

4.3 场景2：FAQ页面的问答交互

4.3.1 代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>FAQ - 常见问题</title>
    <style>
        details { 
            margin: 15px 0; 
            border-left: 4px solid #007bff; 
            padding-left: 15px; 
        }
        summary { 
            color: #007bff; 
            font-size: 16px; 
            cursor: pointer; 
        }
    </style>
</head>
<body>
    <h1>常见问题解答</h1>
    
    <!-- 问题1 -->
    <details>
        <summary>Q1：如何开通会员服务？</summary>
        <p>A1：登录账户后，进入“会员中心”点击“开通”，选择套餐并完成支付即可。</p>
    </details>
    
    <!-- 问题2 -->
    <details>
        <summary>Q2：会员有哪些权益？</summary>
        <ul>
            <li>无广告观看视频</li>
            <li>高清画质（1080P+）</li>
            <li>提前观看新剧集</li>
            <li>专属客服支持</li>
        </ul>
    </details>
</body>
</html>

4.3.2 原理解释

交互逻辑：每个<details>包裹一个FAQ问题（<summary>为问题，内容为答案），用户点击问题标题即可展开答案。
样式优化：通过CSS设置左边框和颜色，突出显示FAQ区块，提升页面层次感。
语义清晰：<summary>直接显示问题文本，用户无需额外操作即可理解点击后的内容。

4.3.3 运行结果

初始状态：所有答案折叠隐藏，仅显示问题标题（如“Q1：如何开通会员服务？”）。
展开后：点击问题，对应的答案展开显示，其他FAQ保持折叠状态。

4.4 场景3：文章补充说明

4.4.1 代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>技术文章 - 补充说明</title>
    <style>
        details { 
            margin: 20px 0; 
            background: #f8f9fa; 
            padding: 15px; 
            border-radius: 5px; 
        }
        summary { 
            font-style: italic; 
            color: #666; 
        }
    </style>
</head>
<body>
    <h1>HarmonyOS分布式技术解析</h1>
    <p>HarmonyOS通过软总线实现设备间的无缝连接...</p>
    
    <!-- 补充说明：技术细节 -->
    <details>
        <summary>补充说明：软总线的通信协议</summary>
        <p>HarmonyOS软总线基于UDP协议，结合自定义加密层，支持设备间的低时延（<200ms）、高带宽（>100Mbps）通信。</p>
    </details>
</body>
</html>

4.4.2 原理解释

交互逻辑：<summary>（“补充说明：软总线的通信协议”）作为技术细节的入口，用户点击后展开详细解释。
样式区分：通过背景色（#f8f9fa）和斜体标题（font-style: italic），将补充说明与正文内容区分。
语义化：<details>明确表示这是可选的补充信息，用户可按需查看。

4.4.3 运行结果

初始状态：技术细节折叠隐藏，仅显示斜体的<summary>文本。
展开后：点击标题，详细的技术解释（如通信协议参数）展开显示。

5. 原理解释与原理流程图

5.1 `<details>`与`<summary>`的交互流程图

[用户点击<summary>] → [浏览器默认行为：切换<details>的open属性]  
  → open="true"：展开内容（显示<details>内的子元素）  
  → open="false"：收起内容（隐藏<details>内的子元素）

5.2 核心原理

原生交互：浏览器内置了<details>和<summary>的交互逻辑，无需开发者编写JavaScript代码。
语义化标记：<details>表示可折叠的内容块，<summary>作为其标题，两者结合形成完整的交互组件。
可访问性：屏幕阅读器会识别<details>和<summary>，提示用户“可展开/收起的内容”。

6. 核心特性

特性	说明
原生交互	无需JavaScript，通过浏览器默认行为实现展开/收起。
语义清晰	`<details>`和`<summary>`直接表达折叠意图，提升代码可读性。
可访问性	屏幕阅读器支持，为视障用户提供操作提示。
样式灵活	可通过CSS自定义`<summary>`的图标、颜色和布局。
嵌套支持	`<details>`可嵌套其他`<details>`，实现多级折叠（如FAQ的子问题）。

7. 环境准备与部署

7.1 生产环境建议

SEO优化：将重要的折叠内容（如产品参数、FAQ答案）放在<details>中，确保搜索引擎能抓取到核心信息。
可访问性：为<summary>添加aria-expanded属性（通过JavaScript动态更新），进一步提升屏幕阅读器体验（可选）。

8. 运行结果

8.1 测试用例1：交互功能验证

操作：点击<summary>标题。
验证点：<details>内容正常展开/收起，图标（如三角形）随状态变化。

8.2 测试用例2：可访问性测试

操作：通过NVDA屏幕阅读器朗读页面内容。
验证点：屏幕阅读器提示“可展开/收起的内容”，用户可通过键盘操作（如回车键）控制折叠状态。

9. 测试步骤与详细代码

9.1 自动化测试脚本（Puppeteer示例）

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('file:///path/to/your/html/file.html');

    // 检查<details>和<summary>是否存在
    const details = await page.$$('details');
    console.assert(details.length > 0, '页面中未找到<details>标签！');

    // 模拟点击<summary>并检查open属性
    const firstSummary = await page.$('summary');
    await firstSummary.click();
    const isOpen = await page.evaluate(el => el.open, details[0]);
    console.assert(isOpen, '<details>未正确展开！');

    await browser.close();
})();

10. 部署场景

10.1 电商产品页

部署方案：将产品参数、用户评价等次要信息折叠，保持首页简洁。

10.2 FAQ与帮助中心

部署方案：每个问题作为<summary>，答案作为<details>内容，提升信息检索效率。

11. 疑难解答

常见问题1：折叠状态无法保存

问题：用户刷新页面后，之前展开的<details>恢复为折叠状态。
解决：通过JavaScript监听toggle事件，将open状态保存到localStorage（可选）。

常见问题2：自定义图标不生效

问题：修改summary::marker后图标未变化。
解决：检查CSS优先级，或直接隐藏默认图标并添加自定义元素（如<span class="icon">▶</span>）。

12. 未来展望与技术趋势

12.1 技术趋势

动态内容加载：结合AJAX，在<details>展开时异步加载内容（如懒加载详细参数）。
动画效果：通过CSS过渡（transition）为展开/收起添加平滑动画（如高度渐变）。

12.2 挑战

复杂交互需求：多级嵌套<details>的交互逻辑可能变得复杂（如父子级联展开）。
跨浏览器兼容性：旧版浏览器（如IE）不支持<details>和<summary>，需提供降级方案（如JavaScript模拟）。

13. 总结

HTML5的<details>和<summary>标签通过原生交互和语义化设计，为Web页面提供了无需JavaScript的可折叠内容解决方案。其核心价值在于提升用户体验（按需查看信息）、增强可访问性（屏幕阅读器支持）和简化代码（无需复杂脚本）。无论是产品详情页、FAQ页面还是技术文档，合理使用这两个标签都能显著优化页面结构和用户交互。未来，随着动态内容加载和动画效果的结合，<details>与<summary>的应用场景将更加丰富。开发者应掌握其原生特性，结合实际需求灵活运用，以构建更高效、易用的Web页面。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

HTML5 <details>与<summary>：可折叠内容的交互实践

HTML5 <details>与<summary>：可折叠内容的交互实践

​​1. 引言​​

​​2. 技术背景​​

​​2.1 可折叠内容的传统挑战​​

​​2.2 <details>与<summary>的定义​​

​​3. 应用使用场景​​

​​3.1 场景1：产品详情页的参数展示​​

​​3.2 场景2：FAQ页面的问答交互​​

​​3.3 场景3：文章补充说明​​

​​3.4 场景4：表单的附加选项​​

​​4. 不同场景下的代码实现​​

​​4.1 环境准备​​

​​4.2 场景1：产品详情页的参数展示​​

​​4.2.1 代码实现​​

​​4.2.2 原理解释​​

​​4.2.3 运行结果​​

​​4.3 场景2：FAQ页面的问答交互​​

​​4.3.1 代码实现​​

​​4.3.2 原理解释​​

​​4.3.3 运行结果​​

​​4.4 场景3：文章补充说明​​

​​4.4.1 代码实现​​

​​4.4.2 原理解释​​

​​4.4.3 运行结果​​

​​5. 原理解释与原理流程图​​

​​5.1 <details>与<summary>的交互流程图​​

​​5.2 核心原理​​

​​6. 核心特性​​

​​7. 环境准备与部署​​

​​7.1 生产环境建议​​

​​8. 运行结果​​

​​8.1 测试用例1：交互功能验证​​

​​8.2 测试用例2：可访问性测试​​

​​9. 测试步骤与详细代码​​

​​9.1 自动化测试脚本（Puppeteer示例）​​

​​10. 部署场景​​

​​10.1 电商产品页​​

​​10.2 FAQ与帮助中心​​

​​11. 疑难解答​​

​​常见问题1：折叠状态无法保存​​

​​常见问题2：自定义图标不生效​​

​​12. 未来展望与技术趋势​​

​​12.1 技术趋势​​

​​12.2 挑战​​

​​13. 总结​​

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品

HTML5 `<details>`与`<summary>`：可折叠内容的交互实践

1. 引言

2. 技术背景

2.1 可折叠内容的传统挑战

2.2 `<details>`与`<summary>`的定义

3. 应用使用场景

3.1 场景1：产品详情页的参数展示

3.2 场景2：FAQ页面的问答交互

3.3 场景3：文章补充说明

3.4 场景4：表单的附加选项

4. 不同场景下的代码实现

4.1 环境准备

4.2 场景1：产品详情页的参数展示

4.2.1 代码实现

4.2.2 原理解释

4.2.3 运行结果

4.3 场景2：FAQ页面的问答交互

4.3.1 代码实现

4.3.2 原理解释

4.3.3 运行结果

4.4 场景3：文章补充说明

4.4.1 代码实现

4.4.2 原理解释

4.4.3 运行结果

5. 原理解释与原理流程图

5.1 `<details>`与`<summary>`的交互流程图

5.2 核心原理

6. 核心特性

7. 环境准备与部署

7.1 生产环境建议

8. 运行结果

8.1 测试用例1：交互功能验证

8.2 测试用例2：可访问性测试

9. 测试步骤与详细代码

9.1 自动化测试脚本（Puppeteer示例）

10. 部署场景

10.1 电商产品页

10.2 FAQ与帮助中心

11. 疑难解答

常见问题1：折叠状态无法保存

常见问题2：自定义图标不生效

12. 未来展望与技术趋势

12.1 技术趋势

12.2 挑战

13. 总结