如何在默认情况下或通过CSS将细节元素设置为OPEN [英] How to set a details element to OPEN by default or via CSS

问题描述

HTML5添加了两个新元素，可用于标记文章的目录： 和 / strong>。

HTML5 adds two new elements that are useful for marking up a table of contents for an article: details and summary.

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

The details element defaults to closed (hides everything except the summary element) and when clicked, it expands to reveal its contents. When it does this, it adds an "open" attribute to the details element.

我想要的元素默认打开，而不必添加open属性标记。

I would like the element to default to open without having to add the open attribute to the markup. Is it possible to do this via CSS or would scripting have to come into play?

例如：

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

推荐答案

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

默认扩展

这篇关于如何在默认情况下或通过CSS将细节元素设置为OPEN的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！