当其他标签打开或在标签外部单击时如何关闭详细信息标签

Question

下面的代码几乎可以达到目的。如果您打开任何详细信息标签，然后单击其外部的任何位置，它将关闭。但是，当新的详细信息标签打开时，当前打开的详细信息标签不会关闭。

var details = [...document.querySelectorAll('details')];
document.addEventListener('click', function(e) {
  if (!details.some(f => f.contains(e.target))) {
    details.forEach(f => f.removeAttribute('open'));
  }
})

<details>
  <summary>Details 1</summary>
  <p>content</p>
</details>

<details>
  <summary>Details 2</summary>
  <p>content</p>
</details>

<details>
  <summary>Details 3</summary>
  <p>content</p>
</details>

我缺少什么？

谢谢。

Answer 1

您可以检查目标是否是details标签，如果不是，则关闭所有details标签。

如果是，则仅关闭那些没有事件目标作为子级的目标。

var details = [...document.querySelectorAll('details')];
document.addEventListener('click', function(e) {
  if (!details.some(f => f.contains(e.target))) {
    details.forEach(f => f.removeAttribute('open'));
  } else {
    details.forEach(f => !f.contains(e.target) ? f.removeAttribute('open') : '');
  }
})

<details>
  <summary>Details 1</summary>
  <p>content</p>
</details>

<details>
  <summary>Details 2</summary>
  <p>content</p>
</details>

<details>
  <summary>Details 3</summary>
  <p>content</p>
</details>