您可以像这样将open属性添加到details标记中：

<details open>
    <summary>Table of Contents</summary>
    <ul>
        <li><a href="#" class="active">Introduction</a></li>
        <li><a href="/2/">Body</a></li>
        <li><a href="/3/">Conclusion</a></li>
    </ul>
</details>

字符串
默认情况下，详细信息将被展开。

如果你想要一个JS解决方案，你可以给予details元素一个ID：

<details id="target-me">
 <summary>Table of Contents</summary>
  <ul>
    <li><a href="#" class="active">Introduction</a></li>
    <li><a href="/2/">Body</a></li>
    <li><a href="/3/">Conclusion</a></li>
  </ul>
</details>

字符串
然后使用以下JS：

document.getElementById("target-me").open = true;

型

如果你想用JavaScript来实现

const details = document.querySelector("details");
details.setAttribute("open", "");

字符串
关于html5 details tag open one by one javascript function working strange

调整<details>标签的open属性的一个用例是构建响应页面。例如，让它在桌面浏览器中默认打开，但在移动的手机中关闭。但是，该属性无法在CSS中设置，因此我们必须使用JavaScript进行媒体查询。
代码示例：

let mql = window.matchMedia("(min-width: 768px)");
if(mql.matches) {
    details.open = true;
}

字符串

你也可以使用下面的替代方法，它仍然有打开和关闭的能力，但最初，它是打开的，你可以测试一下（我提供了我的计算机的输出）：

<div>
    <h3>Open</h3>
    <details open>
        <summary>Always open</summary>
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </details>
</div>

字符串
检查下面输出的照片：