使用 <details> 到 hide/show Table 的内容在语义上是否正确？ [WordPress]

Question

我正在使用流行的 TOC+ plugin by Michael Tran 在我的博文中生成 Table 的内容。

该插件提供了一个选项，允许我们启用 Show/Hide 功能，另一个选项最初隐藏 table 内容。

现在，它使用 Javascript 来实现这一点。问题是 table 在浏览器捕获并呈现 Javascript 之前显示。这最终会导致 Core Web Vitals 中的内容布局偏移 (CLS) 问题。

我继续并禁用了 Show/Hide 选项，这完全解决了 CLS。但是，现在我的帖子中留下了令人讨厌的大目录（我使用全角布局，所以它们被插入到内容本身中）。

无论如何，继续前进我想到了使用 HTML <details> 和 <summary> 元素来获得 Show/Hide 行为而不必依赖 Javascript.

我已成功编辑插件的 PHP 代码以更改标记并更改此：

<div id="toc_container">
  <p class="toc_title">Table of Contents</p>
     <ul class="toc_list>
        <li><a href="#first-heading"></a></li>
        <li><a href="#second-heading"></a></li>
        <li><a href="#third-heading"></a></li>
        <li><a href="#fourth-heading"></a></li>
     </ul>
</div>

为此：

<details id="toc_container">
  <summary class="toc_title">Table of Contents</summary>
     <ul class="toc_list>
        <li><a href="#first-heading"></a></li>
        <li><a href="#second-heading"></a></li>
        <li><a href="#third-heading"></a></li>
        <li><a href="#fourth-heading"></a></li>
     </ul>
</details>

有效。但我不确定这样做是否正确？还是语义不正确？

如果这里有人可以分享他们的意见并在我错的时候纠正我，那就太好了。

编辑：在发布之前我做了一些挖掘并发现了一个 discussion thread over at SitePoint. Moreover, I also saw HTML5 Doctor mentioning “Table of Contents” 作为一个可能的用例。

Answer 1

<summary> 和 <details> 都是有效的 html5 元素，因此可以不受限制地使用。

The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

来源@https://www.w3schools.com/tags/tag_summary.asp

The <details> tag specifies additional details that the user can open and close on demand. The <details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within. Any sort of content can be put inside the <details> tag.

来源@https://www.w3schools.com/tags/tag_details.asp

关于：

The problem is that the table is shown before the browser catches and renders the Javascript.

正确排队脚本应该很容易解决这个问题，您可以在此处了解有关 Wordpress 和脚本排队的更多信息@。

您还可以考虑实施 some kind of page loader，这会让用户知道您的页面仍在加载，它还会防止与内容显示相关的任何问题。

使用 <details> 到 hide/show Table 的内容在语义上是否正确？ [WordPress]

Is it sematically correct to use <details> to hide/show Table of Contents? [WordPress]

html

wordpress

tableofcontents