HTML怎么做手风琴默认展开_html手风琴默认展开第一项【超详细】-html教程-PHP中文网

html手风琴默认展开第一项需在首个标签上添加open布尔属性，如标题内容，其余项不加该属性；open必须作用于而非，且推荐直接写open而非open=""或open="open"。

html怎么做手风琴默认展开_html手风琴默认展开第一项【超详细】

HTML手风琴默认展开第一项怎么写

直接加 checked 属性不行，因为原生 HTML 手风琴（<details></details>）默认是收起的，要让它展开，得用 open 属性 —— 这是唯一合法、有效的控制方式。

`<details></details>` 里加 `open` 就完事了？

是的，但要注意位置和语义：

open 是布尔属性，写上就生效，不需要赋值（open="" 或 open="open" 都行，但推荐只写 open）
必须加在 <details></details> 标签上，不能加在 <summary></summary> 上
多个 <details></details> 中，只给第一个加 open，其他不加，就能实现“仅第一项默认展开”

<details open><summary>常见问题 1</summary><p>这是第一项内容，加载时就可见。</p>
</details><details><summary>常见问题 2</summary><p>这项默认收起，点击才展开。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
														src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
													<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</details>

用 JavaScript 动态控制 `open` 容易踩什么坑

多数人想“等页面加载完再展开”，结果用 document.querySelector('details').open = true 失败 —— 因为 DOM 已渲染，但浏览器可能已按初始 HTML 状态完成布局，强制赋值有时不触发重绘。

最稳妥的是：服务端或构建时直接写死 open 属性，避免 JS 干预
如果必须用 JS（比如 CMS 输出无权改 HTML），得在 DOMContentLoaded 后立即操作，并确保选中的是第一个 <details></details>
别用 setAttribute('open', '')，虽然能加属性，但部分旧版 Safari 对动态设置 open 支持不稳定
用 element.open = true 更可靠，且兼容性更好（Chrome 12+、Firefox 49+、Safari 15.4+）