如何（仅通过使用不带 js 的 css）在打开特定 <details> 标记后自动关闭所有其他 <details> 标记答案

【问题标题】：How (only by using css without js) to automatically close all the other <details> tags after opening a specific <details> tag如何（仅通过使用不带 js 的 css）在打开特定 <details> 标记后自动关闭所有其他 <details> 标记
【发布时间】：2021-07-22 16:42:53
【问题描述】：

我看到了答案，但是用js解决了。我只想通过使用 css 来实现这一点。

所以我正在制作一个带有“详细信息”元素的常见问题手风琴，可以在点击问题时打开答案。我想要实现的是当我单击其他问题以关闭所有其他未解决的答案时。

有什么想法吗？

下面是一个例子。

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

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

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

【问题讨论】：

嘿伙计，我不认为这可以在不使用 Javascript 的情况下完成。可能有办法，但如果你想要那个功能，我会说最好使用 Javascript。
请您提供更多代码和上下文。特别是，与您想要打开/关闭的详细信息相关的可点击问题在哪里？它们都在一个容器中吗？我怀疑您将需要 JS - 您能说出为什么会出现问题吗？
这个问题是双重的，因为我们目前还无法选择出现在打开的 <details> 元素之前的元素，我也不相信 CSS 有办法关闭一个打开的元素（而不是隐藏它的后代元素，但在这一点上，感觉就像我们试图从 HTML 元素本身夺取对<details> 的控制权而将可访问性置于危险之中。JavaScript 是否有原因？您无法使用？

标签： html css accordion summary

【解决方案1】：

我相信，这是你能得到的最接近的：

div > p {
  display: none;
}

div > h2 {
  cursor: pointer;
}

div:active > p {
  display: block;
}

<div>
  <h2>Answer 1</h2>
  <p>
    Here's the text
  </p>
</div>

<div>
  <h2>Answer 2</h2>
  <p>
    Here's the text
  </p>
</div>

<div>
  <h2>Answer 3</h2>
  <p>
    Here's the text
  </p>
</div>

单击标题以显示答案。需要注意的是，一旦您释放点击，答案就会立即隐藏。

【讨论】：