+是现代浏览器中语义化、无需js的原生折叠方案，但不支持ie和旧版safari；需注意必须双标签、默认展开用open属性、样式用::marker定制；兼容旧环境应使用classlist切换is-open类配合max-height过渡，并正确设置aria属性确保可访问性。
折叠菜单用 <details></details> 最简单，但不支持 IE
现代浏览器里，<details></details> + <summary></summary> 是原生、语义化、无需 JS 的折叠方案。点击 <summary></summary> 自动展开/收起内容，浏览器内置状态管理，连 ARIA 都不用手动加。
常见错误是把 <summary></summary> 写成闭合标签（如 <summary></summary>），它必须是双标签且包含文本或内联元素；另外，<details></details> 默认展开需加 open 属性，不是 default 或 opened。
-
<details></details>不支持 IE 和旧版 Safari（≤11.1），若需兼容，得降级用 JS 控制display或max-height - 想默认展开？写
<details open></details>，别漏了open属性本身（无值即可） - 样式定制时，
<summary></summary>前的三角图标可通过::marker伪元素控制，但 Firefox 目前不支持该伪类
用 JS 控制 classList 实现兼容性折叠
当项目需支持 IE11 或旧安卓 WebView 时，靠 CSS 类切换 display 或 max-height 更稳妥。核心是给容器加一个开关类（如 is-open），再用 JS 绑定按钮 click 事件来 toggle。
容易踩的坑是直接操作 style.display = 'block'/'none' —— 这会覆盖 CSS 动画、破坏可访问性（屏幕阅读器无法感知状态变化），也难做过渡效果。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐用
element.classList.toggle('is-open')，配合 CSS 的max-height过渡实现平滑展开 - 按钮需手动设置
aria-expanded属性，并随状态同步更新：button.setAttribute('aria-expanded', isOpen) - 如果菜单内容高度不固定，
max-height设为具体像素值（如500px）比none更易过渡；设为0时注意 padding/margin 会影响视觉收缩感
aria-controls 和 aria-labelledby 别漏掉
可访问性不是锦上添花，而是折叠组件能被键盘和读屏软件正确识别的前提。仅靠视觉样式或 JS 切换类远远不够。
典型错误是只写了 aria-expanded，却没关联控制目标 —— 屏幕阅读器不知道这个按钮到底在控制哪个区域。
- 按钮加
aria-controls="menu-id"，对应菜单容器的id="menu-id" - 若按钮文本不能明确表达功能（比如只是个「+」图标），需用
aria-labelledby指向说明性文字，或补aria-label - 菜单容器建议用
role="region"并配aria-labelledby，让读屏器播报时带上标题上下文
移动端点击穿透和 focus 状态问题
在 iOS Safari 或部分安卓浏览器中，快速连续点击折叠按钮可能触发点击穿透（click-through），导致下层元素响应；另外，<summary></summary> 在某些版本里 focus 样式异常，JS 方案中按钮获得焦点后 outline 偏移也不统一。
这不是 bug，而是 touch 事件与 focus 流程在不同平台处理差异造成的。
- 给按钮加
touch-callout: none和-webkit-tap-highlight-color: transparent减少误触反馈 - JS 方案中，click 事件后显式调用
button.focus()，确保键盘用户能继续用 Tab 导航 - 避免在
<summary></summary>内嵌套<button></button>—— 会造成双重交互语义混乱，直接用<summary></summary>即可
<details></details> 能覆盖 95% 场景；剩下那 5%，往往卡在可访问性细节和小众系统兼容上，而不是展开逻辑本身。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
