热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery除指定区域外点击任何地方隐藏DIV功能

这篇文章主要介绍了jQuery除指定区域外点击任何地方隐藏DIV的相关资料,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下

具体代码如下所示:

$('body').click(function(e) {
  var target = $(e.target);
  // 如果#overlay或者#btn下面还有子元素,可使用
  // !target.is('#btn *') && !target.is('#overlay *')
  if(!target.is('#btn') && !target.is('#overlay')) {
    if ( $('#overlay').is(':visible') ) { 
      $('#overlay').hide();                          
    }
  }
});

或者

$('body').click(function(e) {
  if(e.target.id != 'btn' && e.target.id != 'overlay')
   if ( $('#overlay').is(':visible') ) {
     $('#overlay').hide();
   }
})

PS:下面在接着看一段代码jquery 点击除本身外其他地方隐藏

$("#test").click(function(e) { 
  e?e.stopPropagation():event.cancelBubble = true; 
}); 
$(document).click(function() { 
  $("#test").fadeOut(); 
e?e.stopPropagation():event.cancelBubble = true;  为阻止冒泡事件
});
 

总结

以上所述是小编给大家介绍的jQuery除指定区域外点击任何地方隐藏DIV,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 为了满足专业设计师的需求,我需要一个工具,能够将使用JQuery构建的动态页面转换为纯静态HTML,而无需引用任何JavaScript文件。该工具应具备模拟当前页面的功能,以确保在开发和测试过程中保持页面的完整性和一致性。此外,该工具还应支持高效的页面调试和优化,以便设计师能够快速验证和调整页面布局及样式。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • jQuery学习笔记:深入理解事件委派(2014年8月3日)
    在jQuery中,事件委托机制主要通过`closest()`方法实现。该方法用于查找与指定选择器匹配的最近祖先元素,从当前元素开始逐级向上遍历DOM树。这一技术不仅提高了代码的效率,还能有效处理动态生成的元素。参考资料:jQuery遍历方法详解。 ... [详细]
  • 构建顶级PHP博客系统:实践与洞见
    构建顶级PHP博客系统不仅需要扎实的技术基础,还需深入理解实际应用需求。本文以Zend Studio为开发环境,MySQL作为数据存储,Apache服务器为运行平台,结合jQuery脚本语言,详细阐述了从环境搭建到功能实现的全过程,分享了开发PHP博客管理系统的宝贵经验和实用技巧。 ... [详细]
  • $apply() 方法允许从 AngularJS 框架外部触发表达式的执行,确保其在 AngularJS 的上下文中运行。例如,当你使用 `setTimeout()` 或者集成第三方库时,可以通过调用 `$apply()` 来确保事件更新能够被 AngularJS 检测到并触发脏检查机制,从而实现数据的双向绑定。这一过程不仅保证了数据的一致性,还提升了应用的响应速度和用户体验。 ... [详细]
  • 在编程中,`SyntaxError: unterminated string literal` 错误通常出现在使用 jQuery 或其他 JavaScript 库时,表示某个字符串字面量未正确闭合。这种错误通常是由于代码中的引号不匹配或缺失导致的,例如在字符串中意外地包含了未转义的引号字符。解决此问题的方法是仔细检查相关代码段,确保所有字符串都已正确闭合,并且引号已适当转义。此外,使用现代代码编辑器或 IDE 的语法高亮功能可以帮助快速定位此类问题。 ... [详细]
  • 精通jQuery:深入解析事件处理机制与应用技巧
    本文详细探讨了jQuery的事件处理机制及其应用技巧,通过具体的代码示例,逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准,CSS作为通用样式,确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾,方便读者参考和实践。 ... [详细]
  • 本文深入解析了线程事件机制的原理及其在实际应用中的案例。通过具体示例,展示了多个线程在不同状态下的交互过程,如线程1、2、3处于等待连接状态,而线程4则负责检测服务的运行状况,并在检测完成后通知其他线程开始连接。该机制有效提高了多线程环境下的资源利用效率和系统响应速度。 ... [详细]
  • 2017年12月7日:React中实现不同组件间的路由导航
    在React应用中,实现从首页到不同组件的路由导航是常见的需求。本文介绍了如何通过配置路由来实现这一功能。具体步骤包括:1. 在首页设置路由链接,使其能够跳转到不同的目标组件;2. 确保目标组件正确配置,特别是在导入时使用默认导出(`default`),以确保路由能够正常工作。此外,文章还提供了详细的代码示例,帮助开发者更好地理解和实现这一功能。 ... [详细]
  • 在今天的Linux技能提升课程中,我们将深入探讨 `rm` 命令。`rm` 是一个强大的文件和目录删除工具,不仅可以删除文件,还可以通过添加 `-r` 选项递归删除目录。需要注意的是,`rm -r` 可以替代 `rmdir` 命令来删除空目录,但使用时需格外谨慎,因为误操作可能导致重要数据丢失。 ... [详细]
  • 在基于.NET框架的分层架构实践中,为了实现各层之间的松散耦合,本文详细探讨了依赖注入(DI)和控制反转(IoC)容器的设计与实现。通过合理的依赖管理和对象创建,确保了各层之间的单向调用关系,从而提高了系统的可维护性和扩展性。此外,文章还介绍了几种常见的IoC容器实现方式及其应用场景,为开发者提供了实用的参考。 ... [详细]
  • 在多堆石子游戏中,通过分析Nim博弈策略,探讨了如何在限定时间和内存条件下实现最优解。本文详细研究了石子游戏中的数学原理和算法优化方法,旨在为参与者提供有效的策略指导。具体而言,文章讨论了不同堆数下的Nim值计算及其应用,帮助玩家在复杂的博弈环境中取得优势。 ... [详细]
  • 在Python编程中,探讨了并发与并行的概念及其区别。并发指的是系统同时处理多个任务的能力,而并行则指在同一时间点上并行执行多个任务。文章详细解析了阻塞与非阻塞操作、同步与异步编程模型,以及IO多路复用技术的应用。通过模拟socket发送HTTP请求的过程,展示了如何创建连接、发送数据和接收响应,并强调了默认情况下socket的阻塞特性。此外,还介绍了如何利用这些技术优化网络通信性能和提高程序效率。 ... [详细]
  • 在Mac平台上通过终端操作完成MySQL的启动与彻底关闭——八步指南
    在Mac平台上,通过终端操作实现MySQL的启动与完全关闭,本文提供了一套详细的八步指南。首先,在Finder中使用快捷键进入 `/usr/local` 目录,找到并进入 `mysql` 文件夹。接着,右键选择该文件夹并从上下文菜单中打开终端。在终端中,输入并执行 `./scripts/mysql_install` 命令以开始安装或初始化过程。后续步骤将指导用户如何顺利启动和安全关闭MySQL服务,确保系统资源的有效管理。 ... [详细]
  • C++ STL 常见函数应用详解与实例解析
    本文详细解析了 C++ STL 中常见函数的应用,并通过具体实例进行说明。特别地,文章对迭代器(iterator)的概念进行了深入探讨,将其视为一种将迭代操作抽象化的工具,便于在不同容器间进行元素访问和操作。此外,还介绍了迭代器的基本类型、使用方法及其在算法中的应用,为读者提供了丰富的实践指导。 ... [详细]
author-avatar
手机用户2702932821
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有