最简手风琴应优先使用原生details+summary，现代浏览器原生支持开合、语义化强、无需JS；需用CSS控制summary::marker和max-height过渡动画，多面板互斥须JS监听toggle事件。
用 details + summary 实现最简手风琴，无需 JS
现代浏览器原生支持折叠组件，details 元素自带开合状态和语义化，summary 是可点击标题。它默认无动画，但能通过 CSS 过渡补全视觉反馈。
关键点在于：不能直接对 details 本身设 height: 0 或 opacity —— 它的内部内容是“渲染但不可见”，不是 DOM 移除，所以得作用于子容器。
- 把要折叠的内容包在
<div class="details-content">里 - 用
:has(> summary[open])（需 Chrome 105+/Safari 15.4+）或 JS 切换类名来控制子容器样式 - 过渡必须加在
max-height和opacity上，不能用height（因为高度不确定）
max-height 过渡的取值怎么设才不卡顿
设成固定值（比如 max-height: 200px）最稳妥，但内容超长会截断；设成 max-height: 1000px 又会导致慢速展开（过渡时间拉满）。折中方案是预估最大行数，转为像素值。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 字体行高 1.5，字号 14px → 每行约 21px
- 最多 6 行内容 →
max-height: 126px（留点余量设140px） - 过渡写成
max-height 0.3s ease-in-out, opacity 0.2s ease，避免 opacity 单独延迟造成闪烁 - 初始状态设
max-height: 0; overflow: hidden; opacity: 0
旧浏览器兼容时为什么 JS 切换类比内联样式更可靠
IE 和老版 Edge 不支持 :has()，也不能监听 toggle 事件（只有现代 details 支持）。用 JS 绑定 click 到 summary，再切换包裹层的 open 类是最稳路径。
立即学习“前端免费学习笔记（深入）”；
- 不要用
element.style.height = 'auto'—— 会触发重排，且无法过渡 - 改用
getComputedStyle(el).height读取展开后高度，再设为max-height，接着移除内联样式靠 CSS 过渡回落 - 为避免多次点击冲突，检查当前是否已有
open类再执行逻辑
summary.addEventListener('click', () => {
const content = summary.nextElementSibling;
const isOpen = content.classList.contains('open');
if (isOpen) {
content.style.maxHeight = '0';
content.style.opacity = '0';
content.classList.remove('open');
} else {
content.style.maxHeight = content.scrollHeight + 'px';
content.style.opacity = '1';
content.classList.add('open');
}
});
移动端点击区域小、响应迟钝的常见修复点
summary 默认是内联元素，触摸设备上点击热区窄，还可能被 Safari 的“双击缩放”干扰。
- 给
summary加display: block和padding扩展可点范围 - 加
-webkit-tap-highlight-color: transparent去掉 iOS 点击灰影 - 禁用双击缩放：
meta标签中确保user-scalable=no或用touch-action: manipulation - 如果内容含
iframe或视频，它们可能劫持 touch 事件，需在summary上加cursor: pointer强制提示可交互
overflow: hidden 没加在内容容器上，导致过渡时内容溢出；还有就是忘了重置 max-height 为 0 后，scrollHeight 读出来还是旧值 —— 必须等 transitionend 后再清理内联样式。 
