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

Question

HTML5添加了两个新元素，可用于标记文章的目录： 详细信息 和 摘要 < /强>

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

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

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

检查以下输出的照片：