javascript - 展开所有详细信息标签

Question

任何人都知道是否有办法为使用语义 <details> 的页面创建展开所有链接标签？我设法创建了一个可以自动打开已关闭详细信息的链接:Link to details section that expands details section as well

现在我正在尝试添加一个链接来展开所有 <details> .

我猜你可以用 javascript 做到这一点，但我在这方面很弱。单击启动脚本的链接会产生一些效果，该脚本会在 html 中找到所有“<详细信息并在显示 html 之前插入单词“打开”。不胜感激。

到此为止

<button onclick="openAll()">Expand All</button>

<script>function openAll() {
    var x = document.getElementsByTagName("details");
    var i;
    for (i = 0; i < x.length; i++) {
         x[i].setAttribute("open", "true");
}
</script>

以下适用于第一个 <details>标记，但我想我在上面的循环不正确......

<script>
function openAll() {
    document.getElementsByTagName("details")[0].setAttribute("open", "true"); 
}
</script>

下面是我正在测试的虚拟 html

<details>Hello World<summary>summary</summary>lost</details>
<details>another<summary>good night moon</summary>find me</details>

Answer 1

从 JavaScript 切换页面中的所有 details 元素:

// Toggle open all details elements, onload
// Regardless of their initial status
document.body.querySelectorAll('details')
  .forEach((e) => {(e.hasAttribute('open')) ?
    e.removeAttribute('open') : e.setAttribute('open',true);
    console.log(e.hasAttribute('open'))
  })

<details> <!-- Initial status: closed -->
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

<details> <!-- Initial status: closed -->
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

<details> <!-- Initial status: closed -->
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

---

要关闭所有其他 details，当一个打开时(一次只有一个):

document.body.querySelectorAll('summary').forEach((e) => e.addEventListener("click", (e) => {
   document.body.querySelectorAll('details').forEach((e) => (e.hasAttribute('open')) ? e.removeAttribute('open') : '')
}))

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

---

打开或关闭时，一次切换所有详细信息:

document.body.querySelectorAll('summary').forEach((e) => e.addEventListener("click", (e) => {
   e.preventDefault()
   document.body.querySelectorAll('details').forEach((e) => (e.hasAttribute('open')) ? e.removeAttribute('open') : e.setAttribute('open', true))
}))

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>