javascript - 打开特定 <details> 标签后自动关闭所有其他 <details> 标签

Question

这是我的代码。

<details>
  <summary>1</summary>
  Demo 1
</details>

<details>
  <summary>2</summary>
  Demo 2
</details>

<details>
  <summary>3</summary>
  Demo 3
</details>

我想做的是——如果任何一个<details>的细节标签已打开，我打开/查看另一个 <details>标签，那么较早的标签应该关闭/隐藏/最小化。

如何实现？

我知道 <details> IE 或 Edge 不支持标签。

Answer 1

另一种方法，稍微短一点，效率稍微高一点，without dependencies ，并且在 HTML 中没有 onclick 属性。

// Fetch all the details element.
const details = document.querySelectorAll("details");

// Add the onclick listeners.
details.forEach((targetDetail) => {
  targetDetail.addEventListener("click", () => {
    // Close all the details that are not targetDetail.
    details.forEach((detail) => {
      if (detail !== targetDetail) {
        detail.removeAttribute("open");
      }
    });
  });
});

<details>
  <summary>1</summary>Demo 1
</details>

<details>
  <summary>2</summary>Demo 2
</details>

<details>
  <summary>3</summary>Demo 3
</details>