JQuery实现点击div以外的位置隐藏该div窗口
2025-09-15 23:27
jQuery
189
0
0
0
标题录入
封面图
你可以使用 jQuery 来实现“点击 `div` 以外的位置隐藏该 `div` 窗口”的功能。下面是完整的示例代码: --- ### ✅ 实现思路: 1. 当用户点击页面上的某个位置时,判断这个位置是否在目标 `div` 内部。 2. 如果不是,则隐藏该 `div`。 --- ### 📌 示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Click Outside to Hide Div</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> #myDiv { width: 200px; height: 100px; background-color: lightblue; position: absolute; top: 50px; left: 50px; display: block; } </style> </head> <body> <div id="myDiv">这是一个窗口</div> <script> $(document).on('click', function(e) { // 判断点击的目标是否是 #myDiv 或其子元素 if (!$(e.target).closest('#myDiv').length) { $('#myDiv').hide(); } }); </script> </body> </html> ``` --- ### 🔍 说明: - `$(document).on('click', function(e) { ... })`:监听整个文档的点击事件。 - `$(e.target).closest('#myDiv')`:检查点击的目标是否是 `#myDiv` 或其子元素。 - 如果不是,则隐藏 `#myDiv`。 --- ### ⚠️ 注意事项: - 如果你有多个类似的 `div`,可以将 `#myDiv` 替换为类选择器(如 `.modal`)并使用 `closest()` 方法。 - 如果你需要在点击 `div` 本身时也隐藏,可以添加一个按钮或点击 `div` 的逻辑。 --- 如果你有更复杂的需求(比如动态生成的元素、模态框等),也可以告诉我,我可以帮你进一步优化。
上一篇:
jQuery change method on input type=“file”
下一篇:
Jquery 获取Checkbox值,prop 和 attr 函数区别
标题录入,一次不能超过6条
怎么运用逻辑思维进行推理?
T:0.005300s,M:117.78 KB
返回顶部
留言
留言
评论