css - 如何在默认情况下或通过 CSS 将详细信息元素设置为 OPEN

Question

HTML5 添加了两个用于标记文章目录的新元素：details和summary。

details 元素默认为关闭（隐藏除摘要元素之外的所有内容），单击时，它会展开以显示其内容。当它这样做时，它会向 details 元素添加一个“open”属性。

我希望元素默认打开，而不必将 open 属性添加到标记中。是否可以通过 CSS 做到这一点，或者脚本必须发挥作用？

例子：

<details>
<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>

Answer 1

您可以将 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>

该属性将默认展开

Answer 2

如果你想要一个 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;

Answer 3

您也可以使用下面的替代方法，它仍然可以打开和关闭，但最初它已打开，您可以对其进行测试（我提供了计算机的输出）：

<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>

检查下面的输出照片：

Answer 4

如果你想用 JavaScript 来做

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

相关html5详细信息标签打开一一javascript函数工作奇怪