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

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

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>