<details>需配<summary>才能响应点击，否则无反应；默认三角形用list-style: none和::marker定制；JS通过open属性控制状态，监听toggle事件；不支持原生手风琴和CSS过渡动画。
<details> 标签是 HTML5 原生支持的折叠/展开组件，无需 JS 就能实现基础交互，但默认行为和样式限制多，直接用容易翻车。
为什么<details>点击没反应？
常见原因是没配 <summary> —— 它是 <details> 的唯一合法触发器，且必须是第一个子元素。浏览器只响应对 <summary> 的点击，点其他地方不会切换状态。
-
<details>内部不能直接放文字或<p>，必须包裹在<summary>或其他块级标签里（如<div>） - 若用了
open属性但内容仍不显示，检查是否被 CSS 设置了display: none或visibility: hidden - Safari 旧版本（≤15.4）对
<details>的open属性动态修改支持不稳定，JS 切换可能失效
<summary>里的箭头怎么去掉或自定义？
所有现代浏览器都会在 <summary> 左侧渲染一个默认三角形（::marker），它不是伪元素也不是字符，而是 UA 样式的一部分。要去掉或替换，得用 CSS 覆盖：
details summary {
list-style: none;
}
details summary::marker {
content: "▶ ";
color: #666;
}
注意：::marker 在 Firefox 中需启用 layout.css.marker.enabled（默认开启），但旧版 Edge 不支持；若要兼容性更强，可用 background-image + padding-left 模拟。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
如何用 JS 控制 <details> 的展开状态？
直接读写 open 属性即可，但它不触发事件监听。想监听开关动作，必须监听 toggle 事件（不是 click）：
const el = document.querySelector('details');
el.addEventListener('toggle', () => {
console.log('当前状态：', el.open); // true 表示已展开
});
- 设置
el.open = true会立即展开，但不会触发toggle事件（仅用户交互触发） - 多个
<details>同时存在时，无法原生实现“手风琴”效果（即打开一个时自动收起其他），需手动遍历控制 - SSR 渲染时，服务端设
open属性后，客户端 hydration 阶段若 JS 执行慢，可能出现闪动
移动端点击区域小、误触多怎么办？
<summary> 默认只有文字区域可点，触摸设备上体验差。解决方式是扩大点击热区：
- 给
<summary>加display: block和足够padding，避免只靠文字触发 - 禁用
user-select: none（某些重置 CSS 会加），否则长按可能触发复制而非展开 - 不要用
<button>替代<summary>—— 语义错误，且会破坏原生键盘导航（空格/回车无法切换）
真正麻烦的是动画：原生 <details> 不支持 CSS 过渡，要加展开收起动画必须用 JS 监听 toggle 后操作 max-height 或 height，同时处理滚动定位和焦点管理。
