html - 当其他标签打开或在标签外进行点击时如何关闭详细信息标签
问题描述
下面的这段代码几乎可以解决问题。如果您打开任何详细信息标签,然后单击它之外的任何位置,它将关闭。但是,当前打开的详细信息标签不会在新的详细信息标签打开时关闭。
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>
我错过了什么?
谢谢你。
解决方案
您可以检查目标是否为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>
推荐阅读
- django - 如何在没有额外请求的情况下在 Django REST Framework 中进行动态调度?
- python - Pycharm IDE 没有在我的 Windows 10 上打开 ..非常需要一个建议
- windows - 带有递归 for 循环的批处理文件以移动文件
- javascript - 网络断开时,firebase 更新不会超时或出错
- blazor - 如何在任何地方在 blazor 中调用 js?
- c - memcpy 数组 vs 指针示例和问题
- python - 使用flask和JINJA根据后端变量将类分配给HTML元素的最佳实践是什么?
- node.js - 如何向客户端发送响应并立即终止整个函数而不返回下一个回调
- python - 使用 tkinter 回调 lambda 不理解 python 错误
- hadoop - Hbase 表没有得到保存。关闭后 Hbase 表消失