标签原生支持无js折叠展开，添加open属性可默认展开；须为首个子元素且不可display: none；样式定制应保留::marker和默认交互，避免appearance: none或绝对定位导致失效。
details标签本身就能实现无JS折叠展开
不需要任何JavaScript，<details></details> 是原生支持开合状态切换的HTML5语义化标签。浏览器内置行为决定了点击 <summary></summary> 会自动切换 open 属性，从而控制内容显隐。
关键点在于：<summary></summary> 必须是 <details></details> 的第一个子元素，否则无法触发交互；且不能用 display: none 隐藏 <summary></summary>，否则整个控件失效。
如何让默认状态为展开（open属性）
直接在 <details></details> 标签上添加 open 属性即可，默认展开：
<details open><summary>点击收起</summary><p>这里是被折叠的内容</p> </details>
注意：open 是布尔属性，写上即生效，无需赋值；若想默认收起，就完全不写这个属性。
- 服务端渲染时可动态插入
open控制初始态 - 不要用
open="false"—— 这样反而会强制开启 - CSS中不能通过
[open="false"]选择器判断关闭态，只能用:not([open])
自定义summary样式但保留箭头和交互
浏览器默认会在 <summary></summary> 前加一个三角形指示器，并随开合自动旋转。如果用 appearance: none 或重置 list-style，可能意外移除该行为。
安全做法是只覆盖文字样式，保留默认行为：
details summary {
font-weight: bold;
padding: 8px 12px;
}
details summary::marker {
color: #666;
}
-
::marker可单独调整箭头颜色/大小（Chrome/Firefox支持，Safari需16.4+） - 避免设置
summary { display: block; }—— 某些旧版 Safari 会破坏点击区域 - 不要给
<summary></summary>加cursor: pointer：它本就是可点击的，加了反而干扰无障碍识别
兼容性与常见失效原因
主流浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）都支持 <details></details>，但有几类典型失效场景：
- 父容器设置了
overflow: hidden且高度固定，展开后内容被裁剪 —— 改用max-height动画或去掉 overflow - 在 Shadow DOM 中使用时，部分旧版 Safari 不响应点击 —— 确保
<summary></summary>在 slot 内且未被封装拦截 - 用 CSS 把
<summary></summary>设置为position: absolute，导致点击区域偏移或消失 - 服务端渲染时误将
<details></details>输出为自闭合标签（如<details></details>），HTML解析失败
最常被忽略的是嵌套结构：多个 <details></details> 套在一起时，内部的 <summary></summary> 仍能正常工作，但视觉反馈容易混淆 —— 这时候建议用 CSS 区分层级缩进或边框样式。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
