HTML中实现局部折叠展开应优先使用语义化、无障碍友好的<details><summary>组合，或采用max-height+transition的CSS方案配合JS控制；禁用display切换、height过渡及非语义化写法。
HTML 中没有专门叫“文本域标签”能直接实现局部折叠展开的元素，<textarea> 是纯输入控件，不支持内容折叠；真正适合长文本局部折叠展开的是语义化、可交互的结构组合——核心是用 <details> 和 <summary>，或配合 CSS + JS 实现带动画的自定义效果。
用 <details><summary> 实现零 JS 局部折叠
这是最轻量、最规范的做法，特别适合 FAQ、说明段落、补充信息等“局部”内容：
-
<details>必须包裹整段可折叠内容，<summary>只能是它的第一个子元素，作为点击标题 - 示例中“更多说明”就是局部触发点，点击后只展开它后面的内容，不影响其他段落
- 浏览器原生支持键盘（空格/回车）和屏幕阅读器，
aria-expanded状态自动同步，无需手动维护 - 兼容性良好：Chrome 12+、Firefox 49+、Edge 79+、Safari 6+，IE 不支持（如需兼容 IE，必须换方案）
用 max-height + transition 实现平滑滑动效果
当需要“慢慢滑出”动画，或要嵌套复杂 HTML（如含图片、列表、内联样式），<details> 的硬限制（如无法精确控制高度动画、::marker 样式受限）就凸显出来。此时应采用 CSS 过渡方案：
- 给内容容器设初始
max-height: 0; overflow: hidden;，并加transition: max-height 0.3s ease-in-out - 展开时设
max-height为足够大的固定值（如500px），不能用auto—— CSS 无法对auto做过渡 - JS 控制状态时，优先用
element.dataset.expanded = "true"记录，比查 class 更可靠 - 若内容含异步加载元素（如图片）或浮动布局，展开后调用
offsetHeight强制重排，确保高度计算准确
按钮与内容区域的语义与可访问性要点
无论用哪种方案，交互控件必须符合基本可访问性规范：
立即学习“前端免费学习笔记（深入）”；
- 触发元素必须是
<button type="button">，不能是<div onclick>或<a href="#">—— 否则键盘不可聚焦、读屏器无法识别 - 按钮文案要动态更新（“展开”/“收起”），不能靠伪元素生成，否则读屏器听不到变化
- 若不用
<details>，内容容器建议用<section>包裹，并配显式标题（如<h3>），避免语义缺失 - 自定义方案中，建议手动添加
aria-expanded属性并与 JS 状态同步，增强辅助技术支持
不推荐的常见误区
这些做法看似简单，实则带来兼容、性能或无障碍问题：
- 用
display: none/block切换：无法实现 CSS 动画，且反复操作易引发重排抖动 - 对
height做 transition：从0到auto无效，浏览器不支持 - 在
<details>内放<h2>等标题：破坏文档大纲层级，影响 SEO 和读屏逻辑 - 用
innerHTML拼接按钮文案：可能引入 XSS 风险，也容易覆盖已绑定事件
