手风琴标题必须全宽可点击：事件监听器应绑定在最外层容器（如或），确保覆盖文字、图标及空白区域；推荐使用语义化并设display: block; width: 100%；处理事件时用event.currenttarget而非event.target；添加touch-action: manipulation和cursor: pointer优化移动端体验。
点击区域必须覆盖整个标题行，不能只绑在文字上
手风琴的「可点击区域」默认窄小，是因为开发者常把 onclick 或 addEventListener('click') 直接加在 <span></span> 或 <button></button> 内部文本节点上。实际要响应点击的是整行标题容器（比如 <div class="accordion-header">），否则左右留白、图标旁空白处点不动，用户会反复点击失败。
<p>实操建议：</p>
<ul>
<li>确保事件监听器绑定在包裹标题文字+图标的最外层容器上，不是其子元素</li>
<li>若用 <code><button></button>，它默认是块级且全宽，但需确认没被 width: fit-content 或 display: inline 覆盖
pointer-events: none，或父级有 overflow: hidden 截断点击热区用 <button></button> 而不是 <div> 实现语义化全宽点击
<p>很多人用 <code><div class="accordion-header"> + JS 绑定 click，结果键盘无法聚焦、屏幕阅读器不识别、空格/回车不能触发。用原生 <code><button></button> 是最简方案：它天然支持全宽点击、键盘操作、焦点管理，且无需额外 tabindex。
关键点：
-
<button></button>默认 display 为inline-block，需显式设display: block; width: 100%确保撑满父容器 - 移除所有
border、background样式干扰时，记得保留outline或用:focus-visible提供键盘焦点反馈 - 不要嵌套
<button></button>在另一个<button></button>或<a></a>里，会触发 HTML5 验证错误或事件冒泡异常 - 如果必须用
<div>（如 SSR 限制），至少加 <code>role="button" tabindex="0"，并手动监听keydown处理 Enter/Spaceevent.target和event.currentTarget混用导致点击失效当标题内含图标、开关箭头、badge 等子元素时，用户点在图标上，
event.target是那个<svg></svg>或<i></i>，而你可能在 handler 里写了if (event.target.classList.contains('accordion-toggle'))—— 这就漏掉了所有非 toggle 元素的点击。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
正确做法：
- 一律用
event.currentTarget（即绑定事件的那个元素）来判断状态、切换内容，它不随点击位置变化 - 若需区分点击目标（比如点图标才旋转，点文字才展开），用
event.target.closest('.icon')判断，而非直接依赖event.target - 避免在 handler 里写
event.target.parentNode.querySelector('.content')，改用event.currentTarget.nextElementSibling或预存 data-ref
移动端点击延迟与误触：别忽略
touch-action和cursor在 iOS Safari 或部分安卓浏览器中，纯 CSS 手风琴（无 JS）可能因 300ms 延迟导致点击卡顿；而 JS 实现若没处理 touch 事件，快速双击可能误触发两次 toggle。这不是兼容性 bug，而是交互预期未对齐。
防坑配置：
- 给标题容器加
style="touch-action: manipulation"，关闭双击缩放，消除点击延迟 - CSS 中设置
cursor: pointer，既提供视觉反馈，也避免某些安卓 WebView 忽略非 pointer 元素的 touchstart - 不用
ontouchstart单独监听（维护成本高），优先用click事件——现代浏览器已对click做了 touch 优化 - 如果用了
preventDefault()在 touchstart 里，务必检查是否阻塞了后续 click，这是手风琴点一次没反应、再点才生效的常见原因
- 一律用
