<details>标签默认折叠，无需JS；仅含一个<summary>，用::marker自定义箭头；互斥需JS监听toggle事件；移动端失效常因pointer-events: none。
details 标签默认就是折叠的，不需要额外 JS
浏览器原生支持 <details>，初始状态默认收起，点 <summary> 才展开——这就是最简手风琴效果。它不依赖 JS，语义清晰，还自带可访问性（屏幕阅读器能识别展开/收起状态）。
常见误区是手动加 open 属性或写 JS 控制显隐，反而破坏原生行为。真正要做的只是：确保结构正确、样式可读、别用 display: none 强行隐藏 <summary>。
-
<details>内部只能有一个<summary>（放在最前），其余内容自动成为折叠区 - 不加
open属性 = 默认折叠；加了 = 默认展开（比如 FAQ 里想默认展开某条） - 不要给
<summary>设display: none或visibility: hidden，否则点击无效
summary 前面的小箭头怎么改？用 ::marker 伪元素
Chrome / Edge / Safari 都支持 ::marker 控制 <summary> 前的默认三角符号。Firefox 目前还不支持该伪元素，但可用 list-style 回退。
<pre class="brush:php;toolbar:false;">summary {
list-style: none; /* 先清空默认符号 */
}
summary::marker {
content: "▶ ";
color: #666;
}
details[open] > summary::marker {
content: "▼ ";
}注意：::marker 只对 <code><summary> 生效，且不能用 background 或 padding——它只接受 content、color、font 类属性。
立即学习“前端免费学习笔记（深入）”；
多个 details 怎么实现单开单关（互斥）？必须用 JS
原生 <details> 之间完全独立，没有“同一组内只允许一个展开”的机制。要手风琴互斥效果，得监听 toggle 事件并手动关闭其他项。
- 监听每个
<details>的toggle事件（不是click） - 在事件处理器中，遍历同组所有
<details>，对非当前项调用.removeAttribute('open') - 避免用
.open = false，因为会触发二次toggle事件，导致逻辑错乱
<pre class="brush:php;toolbar:false;">document.querySelectorAll('.accordion details').forEach(item => {
item.addEventListener('toggle', () => {
if (item.open) {
document.querySelectorAll('.accordion details').forEach(other => {
if (other !== item) other.removeAttribute('open');
});
}
});
});移动端点击没反应？检查是否被 pointer-events: none 拦截
真机上点不展开，大概率是父容器或 <summary> 自身被设了 <code>pointer-events: none（常见于某些 CSS 重置库或 Modal 遮罩层逻辑）。这个属性会让点击穿透，<summary> 完全收不到事件。
- 用浏览器开发者工具检查
<summary>计算后的pointer-events值 - 特别留意外层
<div class="modal-content">或<section>是否意外设置了该样式 - 修复方式：显式设
summary { pointer-events: auto; }，或删掉上游的none声明
细节很琐碎：比如 Safari 在 iOS 上对 <summary> 内嵌 <button> 有兼容问题，直接放文字最稳。
