HTML怎么实现文章摘要快速折叠展开-html教程-PHP中文网

原生元素可实现无JS折叠展开，语义清晰、键盘友好、屏幕阅读器自动识别；必须为首个子元素，用CSS伪类切换“展开/收起”文本，避免JS干预以保障SSR和无障碍。

html怎么实现文章摘要快速折叠展开

用 `details` 和 `summary` 最简实现折叠展开

HTML 原生就支持摘要折叠，不用 JS、不引 CSS，details 元素就是为此设计的。浏览器兼容性已覆盖 Chrome 12+、Firefox 49+、Safari 6+、Edge 79+，移动端也完全可用。

常见错误是手动写 div + JS 控制显隐，既增加代码量又易出可访问性问题。原生方案语义清晰、键盘可操作（空格/回车触发）、屏幕阅读器自动识别展开状态。

summary 必须是 details 的第一个子元素，否则不生效
默认收起，加 open 属性可默认展开：
不要给 summary 套 button —— 它本身已是可点击控件，嵌套会破坏语义和焦点逻辑
内联样式或 CSS 选择器可定制外观，例如：summary::marker { content: "▸ "; } 替换默认三角符号

让摘要文字在收起时显示“展开”、展开后显示“收起”

原生 summary 不自动切换文字，但可以用 CSS 的 :not([open]) 和 [open] 伪类分别控制两段文本的显隐，无需 JS。

关键点在于把两种状态的文字都写进 summary，靠 CSS 切换显示：

<details><summary><span class="summary-closed">展开摘要</span>
    <span class="summary-open">收起摘要</span>
  </summary><p>这里是正文摘要内容……</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="overflowclass">DeepBI DHTML 页面生成器</a>
													<p class="overflowclass">生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</details>

CSS 部分：

.summary-closed { display: inline; }
.summary-open { display: none; }
details[open] .summary-closed { display: none; }
details[open] .summary-open { display: inline; }

不能只靠 JS 切换文本——那样对禁用 JS 的用户或 SSR 渲染不友好
避免用 visibility: hidden，它仍占布局空间；用 display: none 更干净
如果摘要内容含图片或 iframe，收起时它们仍会加载（这是浏览器行为），敏感场景需额外处理

折叠区域高度突变导致页面跳动怎么办

当摘要内容较长，details 展开瞬间高度剧增，可能造成下方元素突然下移，影响阅读体验。这不是 bug，而是流式布局的自然表现，但可以缓解。

给 details 设置最小高度（如 min-height: 2em），预留基础空间
用 CSS 过渡仅作用于 max-height（配合固定值）可模拟展开动画，但需预估最大高度，不适用于动态长度内容
更稳妥的做法是：收起时用 overflow: hidden + height: 0 + padding: 0 组合，并过渡这三项 —— 但会丢失原生可访问性，慎用
真正需要平滑动画且兼顾语义？那就得退回到 JS 方案，用 aria-expanded + max-height 过渡，并手动管理焦点