推荐使用HTML5原生标签实现文字折叠展开，兼容性好且无需JS；其次可选JavaScript控制class切换实现带过渡动画的效果；简易场景可用style.display切换；多组折叠项建议用data-*属性配合事件委托统一管理。
如果您希望在网页中实现文字的折叠与展开效果，HTML5 提供了原生的
一、使用 ails> 和 原生标签
HTML5 内置的
1、在 HTML 中插入
2、
立即学习“前端免费学习笔记（深入）”；
3、可在 open 属性，使内容默认处于展开状态。
4、使用 CSS 可自定义 ::marker 伪元素的支持有限。
二、用 JavaScript 控制 class 切换实现折叠
通过为容器元素添加或移除 CSS 类（如 collapsed），结合 CSS 的 max-height 过渡动画或 display 切换，可实现更灵活的折叠效果，适用于需兼容旧版浏览器或定制动画场景。
1、为待折叠内容包裹一个 2、为触发按钮绑定 3、在 CSS 中定义：当存在 4、确保 对于无需动画、追求轻量与最大兼容性的场景，可直接通过修改 DOM 元素的 1、为折叠区域设置唯一 ID，例如 2、为按钮添加 3、在事件处理函数中读取当前 4、注意：此方法会覆盖通过 CSS 文件设置的 display 值，建议优先使用 class 切换方案。 当页面存在多个独立折叠区域时，可通过统一的事件委托机制与 1、为每个折叠按钮添加 2、为所有按钮绑定同一事件监听器，使用 3、使用 4、可配合 foldable-content 与 is-collapsed。click 事件，使用 element.classList.toggle() 切换 is-collapsed 类。is-collapsed 类时，设置 max-height: 0、opacity: 0、overflow: hidden；移除该类时恢复为具体高度值并启用 transition。max-height 的目标值足够容纳全部内容，可预先测量或设为较大固定值（如 500px），避免使用 height: 0 / auto 切换，因其无法触发 CSS 过渡。三、用 JavaScript 操作 style.display 实现简易折叠
style.display 属性控制显隐，适用于内联内容或简单交互需求。id="text-section"。onclick 属性或使用 addEventListener 监听点击事件。element.style.display 值，若为 "none" 则设为 "block"（或对应语义标签的默认显示值），否则设为 "none"。四、用 JavaScript 配合 data-* 属性管理多组折叠项
data-target 属性关联触发器与目标容器，减少重复代码，提升可维护性。data-target="#section-1" 属性，指向对应内容容器的 ID。event.target.dataset.target 获取目标选择器。document.querySelector() 获取目标元素，并对其执行显示/隐藏逻辑。aria-expanded 与 aria-controls 属性增强无障碍访问支持，确保 screen reader 用户能正确识别折叠状态。
