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

Question

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

details 元素默认关闭（隐藏除 summary 元素之外的所有内容），单击时会展开以显示其内容。当它这样做时，它会向 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>

原文由 Scott B 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

默认情况下将展开详细信息。

原文由 Ariona Rian 发布，翻译遵循 CC BY-SA 4.0 许可协议