HTML的details标签open属性怎么默认展开折叠内容-html教程-PHP中文网

details默认展开只需写open属性不带值；open属性存在即展开，与值无关；js应操作open布尔属性而非setattribute；css用details[open]选择器；监听toggle事件获取状态变化。

html的details标签open属性怎么默认展开折叠内容

open 属性存在即展开，不写就收起；写 open="false" 反而强制展开——这是最常翻车的地方。

HTML 中 `details` 默认展开的唯一写法

只写 open，不带等号、不带引号、不带任何值：

<details open><summary>配置详情</summary><p>这里是默认可见的内容</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
														src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
													<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</details>

<details open></details> → 正确，默认展开
<details open="true"></details>、<details open="false"></details>、<details open=""></details> → 全部等效于展开（因为属性“存在”）
<details></details> → 默认收起（最安全的初始状态）
服务端渲染或静态 HTML 场景下，这是最稳定、无 JS 依赖的方式

JavaScript 动态控制 `open` 状态的正确姿势

必须操作 DOM 元素的 open 属性（布尔值），而不是 HTML 属性：

✅ 正确：el.open = true、el.open = false、console.log(el.open)
❌ 错误：el.setAttribute('open', 'false') → 属性被写入，“存在即展开”，结果与预期相反
⚠️ 注意：el.hasAttribute('open') 和 el.open 不等价：初始没写 open 时两者都为 false；但执行 el.open = true 后，hasAttribute 仍返回 false（HTML 源码未变）
推荐切换方式：el.toggleAttribute('open')，语义清晰，且同步 DOM 与 HTML 属性

CSS 响应展开/收起状态只能用 `details[open]`

不能靠 class、不能用 [open="false"]，浏览器根本不解析 open 的值：

✅ 正确：details[open] .content { max-height: 200px; }
✅ 正确：details:not([open]) summary::after { content: "▼"; }
❌ 错误：details[open="false"] → 无效选择器
❌ 错误：details.open → open 不是 class，不存在这个类名
真正容易被忽略的是：JS 修改 el.open 后，CSS details[open] 能实时响应，但 hasAttribute('open') 依然拿不到更新 —— 脚本和样式对“状态”的感知路径完全不同

监听展开/收起变化只能用 `toggle` 事件

details 没有 change 事件，click 也不可靠：

✅ 正确：el.addEventListener('toggle', () => console.log(el.open))，事件在状态变更后派发，此时 el.open 已是最新的布尔值
❌ 错误：el.addEventListener('change', ...) → 根本不会触发
❌ 错误：给 <summary></summary> 绑 click → 干扰键盘（Enter/Space）和屏幕阅读器行为
首次加载不触发 toggle，仅在用户交互或 JS 主动修改 el.open 后才触发