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

Question

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

详细信息元素默认为关闭状态（隐藏除摘要元素之外的所有内容），单击时，它会展开以显示其内容。当它执行此操作时，它会向详细信息元素添加一个“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 解决方案，你可以给细节元素一个 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

如果你想用 JavaScript 来实现

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

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

Answer 4

调整

<details>

标签的

open

属性的一个用例是用于构建响应式页面。例如，让它在桌面浏览器中默认打开，但在手机中默认关闭。但是，该属性可以在 CSS 中设置，因此我们必须使用 JavaScript 来进行媒体查询。

代码示例：

let mql = window.matchMedia("(min-width: 768px)");
if(mql.matches) {
    details.open = true;
}

Answer 5

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

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

检查下面的输出照片：