利用HTML代码中的details标签实现手风琴折叠效果-html教程-PHP中文网

要让多个同时展开，需显式设置每个的 open 属性；默认行为允许多开，并非单例限制。

利用html代码中的details标签实现手风琴折叠效果

details标签默认不支持多开，怎么让多个面板同时展开？

原生 <details></details> 标签默认是“单例行为”：浏览器只允许一个 <details></details> 处于 open 状态，除非你显式设置每个的 open 属性。这不是 bug，是规范行为——<details></details> 本身没内置互斥逻辑，但多数 UI 场景下开发者误以为它像手风琴一样自动收起其他项，结果发现点开第二个，第一个没关，于是手动加 JS 控制。

真正要实现“点击一个、收起其他”，得靠 JS 主动管理 open 属性：

监听所有 <details></details> 的 toggle 事件（不是 click，因为键盘空格也能触发）
遍历同级兄弟 <details></details>，对非当前项调用 element.removeAttribute('open')
注意：不要用 element.open = false，这会触发二次 toggle，导致状态错乱

summary里放按钮或链接，为什么点击没反应？

<summary></summary> 是可聚焦、可交互的，但它内部的 <button></button> 或 <a></a> 默认会冒泡并触发 <details></details> 的展开/折叠，干扰业务逻辑。比如你在 <summary></summary> 里放一个删除图标按钮，一点就先把面板展开了，再执行删除。

解决方法只有两个：

给按钮加 event.stopPropagation()，阻止事件冒泡到 <details></details>
把按钮移出 <summary></summary>，放在 <details></details> 内部但 <summary></summary> 外侧（例如用 flex 布局视觉上靠右对齐）

别试图用 pointer-events: none 或 disabled，前者会让按钮不可点击，后者不适用于 <a></a>。

IE 和旧版 Safari 不支持 details，怎么安全降级？

<details></details> 在 IE 中完全不识别，在 Safari ≤12.1 里有渲染 bug（比如 summary 不显示箭头、open 属性无效）。不能只靠 CSS fallback，得用 JS 检测并补全行为。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

检测方式很简单：

if (!('open' in document.createElement('details'))) {
  // 加载 polyfill 或手动模拟
}

推荐轻量方案：

用 classList.toggle('is-open') 模拟 open 状态
配合 max-height + transition 实现动画（注意：原生 <details></details> 无动画，这是额外增强）
避免用 display: none 切换，会导致屏幕阅读器读不到内容

用 CSS 控制箭头样式，为什么 ::marker 有时不生效？

Chrome/Firefox 支持 details::marker，但 Safari 直到 15.4 才开始支持，且仅限部分属性（content、color），transform 或 font-size 无效。更稳妥的方式是隐藏原生箭头，用 <summary></summary> 里的伪元素替代：

details > summary {
  list-style: none;
}
details > summary::before {
  content: "▶";
  margin-right: 8px;
  transition: transform 0.2s;
}
details[open] > summary::before {
  transform: rotate(90deg);
}

注意两点：