如何在默认情况下或通过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标记中,如下所示:

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

默认情况下将展开该属性