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