HTML details标签与summary标签怎么折叠？原生手风琴效果-html教程-PHP中文网

标签默认折叠，无需js；仅含一个，用::marker自定义箭头；互斥需js监听toggle事件；移动端失效常因pointer-events: none。

html details标签与summary标签怎么折叠？原生手风琴效果

details 标签默认就是折叠的，不需要额外 JS

浏览器原生支持 <details></details>，初始状态默认收起，点 <summary></summary> 才展开——这就是最简手风琴效果。它不依赖 JS，语义清晰，还自带可访问性（屏幕阅读器能识别展开/收起状态）。

常见误区是手动加 open 属性或写 JS 控制显隐，反而破坏原生行为。真正要做的只是：确保结构正确、样式可读、别用 display: none 强行隐藏 <summary></summary>。

<details></details> 内部只能有一个 <summary></summary>（放在最前），其余内容自动成为折叠区
不加 open 属性 = 默认折叠；加了 = 默认展开（比如 FAQ 里想默认展开某条）
不要给 <summary></summary> 设 display: none 或 visibility: hidden，否则点击无效

summary 前面的小箭头怎么改？用 ::marker 伪元素

Chrome / Edge / Safari 都支持 ::marker 控制 <summary></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

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

只对 <summary></summary> 生效，且不能用 background 或 padding——它只接受 content、color、font 类属性。

多个 details 怎么实现单开单关（互斥）？必须用 JS

原生 <details></details> 之间完全独立，没有“同一组内只允许一个展开”的机制。要手风琴互斥效果，得监听 toggle 事件并手动关闭其他项。

监听每个 <details></details> 的 toggle 事件（不是 click）
在事件处理器中，遍历同组所有 <details></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');
      });
    }
  });
});