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

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标签。

如果是，则只关闭那些没有事件目标的 child 。

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>