页面加载时应直接设置details.open = true或调用自定义切换函数，而非伪造toggle事件；因toggle非原生事件，dispatchEvent('toggle')静默失败，且setAttribute('open')不触发后续JS状态更新。
页面加载时“预触发一次 toggle”不是标准操作，因为 toggle 本身不是原生事件，而是指对某个状态（如类名、展开/收起）的切换动作。你真正需要的是：在 DOM 就绪后，**立即执行一次显式的状态切换逻辑**，比如让某个 <details></details> 展开、让某个菜单显示、或让某个表格从隐藏变为可见。
为什么不能直接 dispatchEvent('toggle')
浏览器没有名为 toggle 的原生事件类型；details 元素的展开/收起是通过用户点击 <summary></summary> 触发的内部行为，无法用 dispatchEvent(new Event('toggle')) 模拟。试图这么做会静默失败，且不报错。
-
details.open = true是唯一可靠、语义正确的强制展开方式 - 对自定义折叠组件（如用
classList.toggle()实现的），应直接调用对应逻辑函数，而非伪造事件 - 若强行 dispatch click 到
<summary></summary>，部分浏览器（如 Safari）可能不响应，因它不视其为可交互焦点元素
如何让 details 元素在页面加载时默认展开
最简单且符合标准的做法是直接设置 open 属性——它既是 HTML 属性，也是 JS 可读写的 DOM 属性：
<details open>
<summary>点击展开/收起</summary>
<p>这是默认展开的内容</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</details>
如果必须用 JS 控制（例如根据条件判断）：
- 确保在
DOMContentLoaded后执行，避免元素未挂载 - 写法：
document.querySelector('details').open = true - 不要用
setAttribute('open', '')，它只影响初始状态，后续 JS 修改需走属性而非属性节点
如何让自定义折叠组件（如 classList.toggle）在加载时预执行一次
假设你用 classList.toggle('is-open') 控制一个侧边栏的显隐，且初始状态是收起（无 is-open 类）：
- 加载时想让它“先打开一次”，就直接运行一次切换：
sidebar.classList.add('is-open')（比toggle更明确） - 如果逻辑封装在函数里（如
function toggleSidebar() { ... }），就在初始化时调用它：toggleSidebar() - 别在
DOMContentLoaded里再绑一次 click 监听器去模拟点击——那只是绕远路，还可能因事件委托没配好而失效
容易被忽略的关键点
预触发动作是否该“可逆”？很多人加了 open 或 add 后，忘了用户第一次点击时的行为是否符合直觉。例如：
- 一个
<details open></details>加载后是展开的，用户点一下<summary></summary>就收起——这是正确预期 - 但如果你用 JS 强行
element.classList.add('is-open')，却没同步更新按钮文案或 aria-expanded 属性，辅助技术会误读状态 - 更隐蔽的坑：CSS 过渡依赖
max-height，而 JS 设置类后若内容高度动态变化（比如图片加载完成），初始max-height值可能不够，导致展开时内容被截断
