HTML details的open属性切换？配合JS实现自动折叠排版-html教程-PHP中文网

open属性是布尔属性，存在即展开、不存在即收起；写open="false"仍展开，JS应使用toggleAttribute('open')切换状态，监听用toggle事件，CSS用details[open]选择器。

html details的open属性切换？配合js实现自动折叠排版

details 元素的 open 属性是布尔属性，不能用字符串值

直接写 open="false" 或 open="0" 不会关闭

—— 浏览器只认有没有这个属性，不解析它的值。所以 open 存在即展开，移除即收起。

常见错误是这样写：

<details open="false"><summary>标题</summary>内容</details>

结果它依然展开。正确做法只有两种：open（展开）或不写（默认收起）。

用 JS 切换 open 状态：推荐 toggleAttribute

toggleAttribute 最简洁、语义清晰，且能准确反映 DOM 层面的状态变化（比操作 open 属性值更可靠）。

el.toggleAttribute('open')：有就删，没就加
避免用 el.open = false —— 它只改 JS 属性，不触发浏览器的折叠动画（部分浏览器下会跳过过渡）
如果需要强制展开/收起，用 el.setAttribute('open', '') 或 el.removeAttribute('open')

示例：点击 summary 外区域也能控制开关

document.querySelectorAll('details').forEach(d => {
  d.addEventListener('click', e => {
    if (e.target.tagName !== 'SUMMARY') {
      d.toggleAttribute('open');
    }
  });
});

自动折叠其他已开的 details（手风琴效果）

多个

同时存在时，想实现“只开一个”，关键在于：监听 toggle 事件（它在用户点击 summary 或 JS 触发 toggleAttribute 后触发），然后遍历兄弟节点收起。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

toggle 事件比 click 更准确：它只在 open 状态实际改变后触发
注意不要用 change 事件 —— 不支持
用 closest 或预设容器 class 来限定作用域，避免误操作全局 details

示例（同一父容器内互斥）：

const accordion = document.querySelector('.faq-list');
accordion.addEventListener('toggle', e => {
  if (!e.target.hasAttribute('open')) return;
  accordion.querySelectorAll('details[open]').forEach(d => {
    if (d !== e.target) d.removeAttribute('open');
  });
});

折叠动画和排版塌陷问题怎么处理

默认没有 CSS 过渡，直接显示/隐藏会导致内容“闪现”或布局跳动。要平滑，得靠 CSS 配合 max-height 和 overflow 模拟，但要注意：

不能直接对 details 设 transition: max-height —— 因为 max-height: 0 时内部 summary 仍可点击，逻辑错乱
更稳妥的做法：用 details[open] > *:not(summary) 控制子内容的 max-height 和 opacity
若内容高度不确定，max-height 设为足够大的固定值（如 600px），再配合 overflow: hidden
记得给 summary 加 position: relative 或 z-index，避免动画过程中被遮挡