img标签display为block时候再点击非img时候如何关闭
时间: 2024-05-01 08:23:37 浏览: 16
可以通过添加一个点击事件监听器来实现。当用户点击非 img 元素时,可以检查当前是否有显示的 img 元素,如果有,则将其隐藏。
以下是一个示例代码:
```javascript
// 获取所有的 img 元素
const imgs = document.querySelectorAll('img');
// 添加点击事件监听器
document.addEventListener('click', function(event) {
// 检查点击的元素是否为 img 元素
const isImg = event.target.tagName.toLowerCase() === 'img';
// 检查当前是否有显示的 img 元素
const activeImg = document.querySelector('img.active');
// 如果点击的不是 img 元素,并且当前有显示的 img 元素,则隐藏它
if (!isImg && activeImg) {
activeImg.classList.remove('active');
}
});
// 给所有 img 元素添加点击事件监听器
imgs.forEach(img => {
img.addEventListener('click', function() {
// 切换显示/隐藏状态
this.classList.toggle('active');
});
});
```
在上面的代码中,我们首先获取所有的 img 元素,然后添加了一个点击事件监听器。当用户点击页面上的任何元素时,我们会检查当前是否有显示的 img 元素,并将其隐藏。
同时,我们为每个 img 元素添加了一个点击事件监听器。当用户点击 img 元素时,我们将切换其显示/隐藏状态。这里使用了一个.active CSS 类来控制 img 元素的显示状态。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)