语义化折叠首选 +，需确保为首个子元素且不嵌套交互标签；滑动动画须用max-height+JS动态测量；静态页可用+:checked；表格层级折叠应通过data-level和JS控制，并始终保障aria-expanded等可访问性属性。
用 <details></details> + <summary></summary> 实现语义化折叠
这是最轻量、最可靠的选择，不需要 JS，键盘可访问，屏幕阅读器能识别状态。但必须遵守几个硬约束：<summary></summary> 必须是 <details></details> 的第一个直接子元素，中间不能有空格、换行或其它标签；<summary></summary> 内部不能嵌套 <button></button> 或 <a></a>，否则会劫持原生 toggle 行为。
常见错误：写成 <details><p><summary>标题</summary></p></details> —— 这会导致点击无效；或者给 <summary></summary> 加 role="button" 和 tabindex —— 反而破坏可访问性。
实操建议：
- 默认展开直接写
<details open></details>，别依赖 JS 设置open属性（Safari ≤15.4 会失效） - 图标旋转用
summary::before { content: "▶"; transform: rotate(0deg); transition: transform .2s; }，再配details[open] > summary::before { transform: rotate(90deg); } - 不要给
<details></details>设height或transition，它内部高度是动态计算的，强行加过渡会抖动或失效
需要滑动动画？用 max-height + JS 动态测高
原生 <details></details> 不支持高度过渡，要“滑动展开”，就得放弃它，改用 max-height 模拟。核心难点不是 JS，而是 CSS 无法对 height: auto 做过渡，所以必须让 JS 读取真实内容高度。
立即学习“前端免费学习笔记（深入）”；
常见错误：写死 max-height: 500px —— 小内容会弹跳，大内容被裁剪；或只设 overflow: hidden 却忘了收起时清空 max-height 行内样式，导致后续判断错乱。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
实操建议：
- 点击时调用
el.scrollHeight获取真实高度，设为max-height；收起时设max-height: 0，并确保overflow: hidden同时生效 - 收起后立即清除
max-height行内样式（el.style.maxHeight = ''），避免下次展开误用旧值 - 若内容含图片或异步加载项，展开后调用
el.offsetHeight强制重排，再设max-height，否则高度可能算不准
纯 CSS 方案：用 input[type="checkbox"] + :checked
适合静态页、JS 被禁用环境，或不想引入脚本的轻量场景。原理是靠复选框状态驱动相邻兄弟元素显隐，完全零 JS。
常见错误：结构顺序错——<input> 不在最前，或 <label></label> 和 <div class="panel"> 之间夹了其它标签；又或者给 <code><input> 设了 display: none 却没用 position: absolute 隐藏，导致布局塌陷。
实操建议：
- HTML 结构必须严格为：
<input type="checkbox" id="toggle-1"><label for="toggle-1">标题</label><div class="panel">内容</div> - CSS 用
input[type="checkbox"] + label + .panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } -
<label></label>必须带for属性且值匹配<input>的id，否则点击无响应
表格里实现层级折叠？别嵌套 <tr>，用 <code>data-level + JS 控制
HTML 表格不支持 <tr> 嵌套，浏览器会自动修正 DOM 结构，把子行提到同级 <code><tbody> 下，父子关系彻底丢失。所谓“树形表格”，本质是靠属性标记 + JS 批量操作。
<p>常见错误：把子行直接写在父行后面，以为 DOM 顺序就是父子关系；或用 <code>visibility: hidden 控制显隐——仍占布局空间，折叠后留白、滚动条异常。
实操建议：
- 每行加
data-level="1"/data-level="2"，并用data-parent-id="101"显式关联父行 ID - 子行统一包裹在
<tbody class="children-of-101"> 或 <code><div role="rowgroup"> 中，避免被浏览器重排 <li>JS 用 <code>document.querySelectorAll('tr[data-level="2"][data-parent-id="101"]')精准筛选，而不是全量查tr[data-level="2"] - 显隐优先用
style.display = 'none'，但确保父行<td> 内不嵌套需独立控制的子表格，否则 <code>colspan易错位最容易被忽略的是可访问性底线：所有折叠控件必须带
aria-expanded和aria-hidden，否则屏幕阅读器用户根本不知道状态是否改变。另外，移动端点击延迟、iOS Safari 对transform的重绘抖动、Safari 旧版对details.open的兼容性问题，都得单独兜底处理。
