替换 summary 默认箭头应清空原生标记并用 ::before 伪元素重绘：先设 list-style: none 和 position: relative，再通过 details[open] summary::before 控制旋转动画；内容截断需动态读取 scrollHeight 并监听 toggle 事件；手风琴互斥须仅在当前展开时关闭其他；表单焦点需避免破坏原生语义并手动管理。
summary 默认箭头怎么替换成自定义图标
浏览器用 ::marker 渲染 <summary></summary> 前的三角符号，但 Safari 对 ::marker 支持不稳，直接覆盖容易失效。更可靠的做法是清空原生标记，用 ::before 伪元素重绘。
关键点：
- 必须先设
list-style: none，否则::marker和::before可能共存 -
summary要设position: relative，才能让::before绝对定位对齐 - 展开状态用
details[open] summary::before匹配，别只靠 JS 加类——部分旧 Safari 不响应该选择器 - 旋转动画比纯内容切换更顺滑：
transform: rotate(90deg)比改content更易控制过渡
示例 CSS：
summary {
list-style: none;
position: relative;
padding-left: 24px;
}
summary::before {
content: "▶";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s;
}
details[open] summary::before {
content: "▼";
transform: translateY(-50%) rotate(90deg);
}
details 展开后内容被截断或留白太多
这是硬编码 max-height 值（比如 500px）导致的典型问题：值太小会裁剪内容，太大则收起时动画拖沓、展开时高度“冲过头”。
立即学习“前端免费学习笔记（深入）”；
真正可控的解法不是猜高度，而是动态读取：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听
details的toggle事件，而非click—— 它兼容键盘操作，且在展开动作完成后再触发 - 展开前先设
max-height: 0，再强制重排（如读取offsetHeight），再赋值element.scrollHeight - 收起动画结束（
transitionend）后，把max-height设回none，避免干扰后续 JS 计算（比如getBoundingClientRect()） - 如果内容含图片，
scrollHeight可能读早了——得等img的load事件或用IntersectionObserver触发二次测量
多个 details 实现手风琴互斥时状态错乱
原生 <details></details> 默认各自独立，点击一个不会关掉其他。强行用 JS 控制时，常见错误是：在 toggle 回调里遍历所有兄弟节点并设 open = false，结果刚设完又触发另一个 toggle 事件，造成闪烁或状态翻转。
稳妥做法：
- 只在当前
details的open为true时才关闭其他（即用户是“展开”这个项，才联动收起别的） - 用
event.currentTarget确保操作的是触发者本身，不是冒泡上来的 - 避免直接改
open属性，改用details.removeAttribute('open')或details.toggle()，后者在 Safari ≤15.4 中更可靠 - 如果页面有大量
details，别用querySelectorAll每次都查，缓存 NodeList 或用事件委托
核心逻辑片段：
document.querySelectorAll('details').forEach(d => {
d.addEventListener('toggle', function(e) {
if (this.open) {
document.querySelectorAll('details').forEach(other => {
if (other !== this) other.removeAttribute('open');
});
}
});
});
折叠区域包含表单控件时焦点丢失
手写 JS 切换 display: none/block 最常出这个问题：内容收起时 DOM 还在，但不可聚焦；展开后焦点没自动回到第一个可聚焦元素，键盘用户得按多次 Tab 才能进内容区。
<details></details> 原生行为已处理这点，但前提是别破坏它：
- 不要给
<summary></summary>加tabindex="-1"或role="button"，这会让屏幕阅读器忽略其语义 - 别在
<summary></summary>里嵌<button></button>或<a></a>，它们会劫持事件，导致回车键无法触发展开 - 如果必须加额外按钮（如“编辑”“删除”），放
<summary></summary>内部，但用event.stopPropagation()阻止冒泡到<details></details> - 展开后如需聚焦，监听
toggle事件，在this.open === true时手动focus()第一个input或button
最易被忽略的一点：收起时若当前有输入框获得焦点，<details></details> 不会自动把焦点移走——得在 toggle 里判断 !this.open 并主动 focus() 到触发按钮上，否则键盘用户会卡在不可见区域。
