在现代网页设计中，为了优化用户体验和页面布局，我们经常需要对冗长的文本内容进行折叠和展开处理。传统的做法通常依赖javaScript来切换内容的可见性或高度，但这增加了页面的复杂性。本文将介绍一种纯css的解决方案，利用html5原生的<details>和<summary>标签，结合CSS动画，实现一个优雅且无需javascript的“展开/收起”功能。
理解<details>和<summary>标签
HTML5引入的<details>和<summary>标签提供了一种语义化的方式来创建可展开/收起的组件。
- <details>：作为容器元素，它代表一个可以被用户打开和关闭的组件。
- <summary>：它是<details>的第一个子元素，作为组件的可见标题或标签。用户点击<summary>时，<details>的内容就会展开或收起。
当<details>元素处于展开状态时，它会自动获得一个open属性。我们可以利用这个属性来通过CSS控制其样式。
实现基本“展开/收起”功能
首先，我们来构建基本的HTML结构。将需要折叠的文本内容放置在<details>标签内，紧随<summary>标签之后。
立即学习“前端免费学习笔记（深入）”；
<div class="qodef-m-content"> <details> <summary>点击展开/收起文本</summary> <p class="qodef-m-text"> Bonjour je suis Olfa une nana hypersensible marié et maman de deux enfants. En 2018 je quitte mon activité dans la finance qui ne colle pas avec mes valeurs et je commence une formation en naturopathie afin d’avoir des bases en médecines naturelles, très vite ma soif d’apprendre me dirige vers des techniques de massages corps, des thérapies brèves et des soins énergétiques. Ce parcours de plusieurs années me permet d’帮助多位女性在身体和精神上得到疗愈。 2021年，我因健康问题，在医嘱下不得不停止按摩工作，但我的热情战胜了一切，我决定接受RNCP课程培训，学习各种面部按摩，成为一名面部护理师，同时我也通过了美容师的考试。 现在，我乐于用我的双手和专业知识，为您的面部带来焕然一新的美丽。 我期待在普罗旺斯艾克斯与您相见，体验我的特色护理。 </p> </details> </div>
在这个结构中，用户点击“点击展开/收起文本”后，<p>标签内的长文本就会显示或隐藏。默认情况下，浏览器会为<summary>提供一个小三角形图标，指示其可点击状态。
添加展开动画效果
为了使展开和收起过程更加平滑和富有动感，我们可以引入CSS动画。这里我们将使用transform和opacity属性结合@keyframes来实现一个从顶部向下展开的效果。
/* 为内容区域添加基本样式（可选） */ .qodef-m-content { width: 80%; margin: 20px auto; border: 1px solid #eee; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 8px; } /* 文本内容样式 */ .qodef-m-text { font-family: "Cormorant Garamond", sans-serif; font-style: italic; font-weight: 400; font-size: 18px; /* 调整字体大小以适应示例 */ line-height: 1.6; color: #333; padding-top: 10px; /* 与summary隔开 */ } /* summary 样式 */ summary { cursor: pointer; font-weight: bold; color: #007bff; padding: 5px 0; outline: none; /* 移除点击时的焦点边框 */ list-style: none; /* 移除默认的列表标记 */ } /* 当details展开时，改变summary的标记样式 */ details[open] summary::marker { content: '▾'; /* 展开时显示向下箭头 */ } summary::marker { content: '▸'; /* 收起时显示向右箭头 */ font-size: 1.2em; margin-right: 5px; color: #007bff; } /* 针对details内部的p标签应用动画 */ details p { animation: anim 400ms ease-out forwards; /* forwards 保持动画结束状态 */ transform-origin: top; /* 动画从顶部开始 */ overflow: hidden; /* 确保内容在缩放时不会溢出 */ } /* 定义动画关键帧 */ @keyframes anim { from { transform: scaleY(0); /* 初始垂直缩放为0 */ opacity: 0; /* 初始透明度为0 */ max-height: 0; /* 辅助性地确保内容隐藏 */ } to { transform: scaleY(1); /* 垂直缩放为1 (完全显示) */ opacity: 1; /* 完全不透明 */ max-height: 500px; /* 设置一个足够大的最大高度，以适应内容 */ } } /* 针对details收起时的动画（可选，更复杂） */ /* 注意：details元素收起时，内容会立即消失， 如果需要收起动画，通常需要JavaScript或更复杂的CSS技巧 */ /* 这里的动画只在展开时生效，收起时内容会瞬间隐藏 */动画解释：
- details p：我们选择<details>内部的<p>标签作为动画目标，因为它是实际被隐藏/显示的内容。
- animation: anim 400ms ease-out forwards;：
- anim：动画名称。
- 400ms：动画持续时间为400毫秒。
- ease-out：动画以慢速结束。
- forwards：动画结束后，元素将保持在动画的最后一帧状态，这对于展开动画至关重要。
- transform-origin: top;：设置transform的基点在元素的顶部，这样内容会从上向下展开。
- @keyframes anim：定义名为anim的关键帧动画。
- from：动画开始时的状态。transform: scaleY(0)将元素垂直方向缩放为0，使其不可见；opacity: 0使其完全透明；max-height: 0作为辅助，确保在动画开始时内容不占用空间。
- to：动画结束时的状态。transform: scaleY(1)将元素垂直方向恢复到原始大小；opacity: 1使其完全不透明；max-height: 500px设置一个足够大的最大高度，以确保内容完全显示。
完整示例代码
将HTML和CSS结合，即可看到完整的“展开/收起”动画效果。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纯CSS动画“展开/收起”文本</title> <style> body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; } /* 为内容区域添加基本样式（可选） */ .qodef-m-content { width: 80%; max-width: 800px; margin: 20px auto; border: 1px solid #eee; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 8px; background-color: #fff; } /* 文本内容样式 */ .qodef-m-text { font-family: "Cormorant Garamond", serif; /* 示例字体，可替换 */ font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.6; color: #333; padding-top: 10px; margin: 0; /* 移除p标签默认外边距 */ } /* summary 样式 */ summary { cursor: pointer; font-weight: bold; color: #007bff; padding: 5px 0; outline: none; /* 移除点击时的焦点边框 */ list-style: none; /* 移除默认的列表标记 */ display: flex; /* 使用flex布局对齐箭头和文本 */ align-items: center; } /* 自定义summary的标记图标 */ summary::before { content: '▸'; /* 默认收起时显示向右箭头 */ font-size: 1.2em; margin-right: 8px; color: #007bff; transition: transform 0.2s ease; /* 箭头旋转动画 */ } /* 当details展开时，summary的标记图标 */ details[open] summary::before { content: '▾'; /* 展开时显示向下箭头 */ transform: rotate(0deg); /* 保持向下，或根据需要旋转 */ } /* 针对details内部的p标签应用动画 */ details p { animation: expandContent 400ms ease-out forwards; /* forwards 保持动画结束状态 */ transform-origin: top; /* 动画从顶部开始 */ overflow: hidden; /* 确保内容在缩放时不会溢出 */ will-change: transform, opacity, max-height; /* 优化动画性能 */ } /* 定义动画关键帧 */ @keyframes expandContent { from { transform: scaleY(0); /* 初始垂直缩放为0 */ opacity: 0; /* 初始透明度为0 */ max-height: 0; /* 辅助性地确保内容隐藏 */ } to { transform: scaleY(1); /* 垂直缩放为1 (完全显示) */ opacity: 1; /* 完全不透明 */ max-height: 500px; /* 设置一个足够大的最大高度，以适应内容 */ } } /* 注意：details元素收起时，内容会立即消失。 如果需要收起动画，通常需要JavaScript来控制， 或者更复杂的CSS技巧（如利用max-height和transition，但与scaleY动画结合较复杂）。 此示例主要侧重于展开时的动画效果。 */ </style> </head> <body> <div class="qodef-m-content"> <details> <summary>关于Olfa的故事</summary> <p class="qodef-m-text"> Bonjour je suis Olfa une nana hypersensible marié et maman de deux enfants. En 2018 je quitte mon activité dans la finance qui ne colle pas avec mes valeurs et je commence une formation en naturopathie afin d’avoir des bases en médecines naturelles, très vite ma soif d’apprendre me dirige vers des techniques de massages corps, des thérapies brèves et des soins énergétiques. 这个长达数年的旅程让我帮助了许多女性在身心上得到治愈。 2021年，我因健康问题，在医嘱下不得不停止按摩工作，但我的热情战胜了一切，我决定接受RNCP课程培训，学习各种面部按摩，成为一名面部护理师，同时我也通过了美容师的考试。 现在，我乐于用我的双手和专业知识，为您的面部带来焕然一新的美丽。 我期待在普罗旺斯艾克斯与您相见，体验我的特色护理。 </p> </details> <details> <summary>另一个示例文本</summary> <p class="qodef-m-text"> 这是一个较短的示例文本，用于演示纯CSS“展开/收起”功能。 它同样可以应用平滑的展开动画。 通过这种方式，我们可以在不引入任何JavaScript代码的情况下， 实现丰富的用户界面交互，从而提高页面的加载速度和整体性能。 </p> </details> </div> </body> </html>注意事项与总结
- 收起动画的局限性：此纯CSS方案在展开时能提供平滑动画，但在收起时，由于<details>元素的默认行为，内容会立即隐藏。如果需要收起时的动画效果，通常需要结合JavaScript来监听details的toggle事件，并手动控制内容的过渡。
- max-height的使用：在@keyframes中设置max-height是一个常见的技巧，用于在动画期间辅助控制内容区域。max-height的值应足够大，以确保所有内容都能完全显示。
- summary的图标：默认情况下，浏览器会为<summary>提供一个三角形图标。我们可以通过summary::marker或summary::before伪元素来自定义这个图标，甚至使用Font Awesome等图标库。通过details[open] summary::before可以根据展开状态切换图标。
- 可访问性：<details>和<summary>标签天生具有良好的可访问性。它们支持键盘导航（Tab键聚焦，Enter/Space键切换），并能被屏幕阅读器正确解析，无需额外ARIA属性。
- 浏览器兼容性：<details>和<summary>标签在现代浏览器中具有良好的兼容性（ie浏览器除外，但可以通过Polyfill解决）。
通过上述方法，我们成功地利用HTML5的语义化标签和纯CSS动画，实现了一个高效、优雅且无需JavaScript的“展开/收起”文本功能。这不仅简化了开发流程，也提升了页面的性能和用户体验。