原生 details/summary 实现响应式图片手风琴最省事，语义正确且无障碍友好；图片须置于 summary 后，配合 clip-path 或 transform 实现平滑展开，需注意热区优化与加载状态同步。
用 details/summary 实现响应式图片手风琴最省事
现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+、Edge 79+）原生支持，图片直接塞进 details 里就行，不用 JS、不写动画逻辑、语义正确、键盘和屏幕阅读器都能用。
常见错误是把图片放错位置——summary 必须是 details 的第一个子元素，图片得放在 summary 后面，否则点击无效或不折叠：
<details> <summary>点击查看大图</summary> <img src="images/pic1.jpeg" alt="示例图" width="100%"> </details>
-
width="100%"让图片随容器缩放，配合父级details的 CSS 设置max-width: 100%即可响应式 - 若图片高度差异大，建议加
height="auto"防止拉伸变形 - 不要给
summary设display: none或visibility: hidden，否则点击区域消失
想让多个图片面板单选（传统手风琴）必须加 JS
details 默认互不干扰，点开一个，其他不会自动关闭。要实现“只开一个”，得监听 toggle 事件并手动关掉别的：
document.querySelectorAll('details').forEach(panel => {
panel.addEventListener('toggle', () => {
if (panel.open) {
document.querySelectorAll('details').forEach(other => {
if (other !== panel) other.open = false;
});
}
});
});- 一定要用
toggle事件，不是click——键盘按空格/回车也能触发，无障碍才达标 - 别在事件里直接调用
querySelectorAll多次，页面面板多时性能会抖；建议提前缓存节点：const panels = document.querySelectorAll('details'); - 如果图片加载慢，
open状态可能先于图片渲染完成，视觉上会有短暂空白；可加loading="lazy"并配合img的onload做状态同步（非必需但更稳）
图片展开时加平滑过渡？max-height 不适合，改用 clip-path 或 transform
details 内容无法对 height 或 max-height 做 CSS 过渡（因为内容高度是动态的，且 height: auto 不可过渡），硬套 max-height: 500px 容易截断或动画拖沓。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
更稳妥的动效方案是用 clip-path 或 transform: scaleY()，配合 overflow: hidden：
details[open] summary + img {
animation: unfold 0.3s ease-out forwards;
}
@keyframes unfold {
from { clip-path: inset(100% 0 0 0); }
to { clip-path: inset(0); }
}-
clip-path: inset()兼容性较好（Chrome 55+、Firefox 56+、Safari 15.4+），比transform: scaleY()更精准控制裁剪范围 - 避免在
img上直接设transition，容易因加载时机导致动画跳变 - 如果必须支持 Safari 14 或更早，只能退回到 JS 测高 +
max-height，但得预估最大高度并留余量
移动端点击区域太小？重点调 summary 的点击热区
原生 summary 默认点击区域窄，尤其在手机上容易点不准。不能只靠加 padding，还要防止误触相邻面板：
details summary {
padding: 16px;
margin: -16px; /* 抵消 padding 导致的布局偏移 */
}
details summary::marker {
display: none; /* 移除默认三角，避免干扰热区 */
}
details summary::before {
content: "▶";
display: inline-block;
margin-right: 8px;
font-size: 0.9em;
}- 用
margin: -Xpx抵消padding是关键，否则多个details会因外边距叠加导致间距异常 -
::marker在 Safari 下有时不生效，所以额外用::before控制图标更可靠 - 如果图片本身带链接或交互元素，注意
pointer-events: none别误加到summary上，否则整个面板不可点
真正难的不是让图片动起来，而是让展开状态和图片加载节奏对齐、让触摸热区在不同设备上都稳、让键盘用户和屏幕阅读器不被漏掉——这些细节没处理好，再炫的动画也白搭。
