怎么让HTML中的details标签在页面加载时自动展开-html教程-PHP中文网

details默认展开只需写，open是布尔属性，存在即展开、不存在即收起；open="false"等写法因属性存在而强制展开。

怎么让html中的details标签在页面加载时自动展开

details 标签页面加载时自动展开，只需写 <details open></details>，一个字符都不能多——不带等号、不带引号、不带值。

为什么 `open="false"` 反而展开了

因为 open 是 HTML 布尔属性（boolean attribute），浏览器只判断它“是否存在”，不解析等号右边的内容。只要标签里出现 open 这三个字母，无论后面跟 "false"、"0" 还是 "banana"，都等效于 open 存在，于是强制展开。

<details></details> → 初始收起（el.open === false）
<details open></details> → 唯一正确默认展开写法
<details open="false"></details> → 实际展开，且 el.hasAttribute('open') 为 true

服务端渲染或静态 HTML 中最稳的写法

不依赖 JS、无障碍友好、兼容性好，直接在 HTML 源码里写死：

<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/skill5806" title="html-deploy"><img
														src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
													<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</details>

适合 SSR、Jekyll、Hugo、纯静态页等场景
避免 JS 加载延迟导致“闪一下再展开”
屏幕阅读器能立即识别为已展开状态

JS 动态插入时怎么确保默认展开

如果用 innerHTML 或 insertAdjacentHTML 插入 details，必须保证字符串中是 <details open></details>，而不是拼接出来的 open="${flag}" —— 后者极易误写成 open="false"，反而翻车。

✅ 正确：el.insertAdjacentHTML('beforeend', '<details open><summary>...</summary><p>...</p></details>');
❌ 危险：const flag = false; el.innerHTML = `<details open="${flag}">...</details>`;（flag 是 false 也展开）
⚠️ 注意：用 document.createElement('details') 创建后，需手动设 el.open = true，但此时 HTML 属性未写入，details[open] CSS 不生效，hasAttribute('open') 仍为 false