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();
<pre name="code" class="html">e?e.stopPropagation():event.cancelBubble = true;  为阻止冒泡事件</pre> });
<pre></pre>
<br>
<link rel="stylesheet" href="http://static.blog.csdn.net/public/res-min/markdown_views.css?v=2.0">

总结

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

赞 (0)

相关推荐

  • 基于jquery鼠标点击其它地方隐藏层的实例代码

    基于jquery鼠标点击其它地方隐藏层的实例代码

    效果图:下面的代码运行后,需要再刷新一下. test .div_d{ padding:10px; border:1px dotted red; position:absolute; display:none; cursor:pointer;} $(function(){ $("input[id=search]").focus(function(even){ var pos=$(this).offset(); $(".div_d").css({left:pos.lef

  • 由点击页面其它地方隐藏div所想到的jQuery的delegate

    由点击页面其它地方隐藏div所想到的jQuery的delegate

    先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: 复制代码 代码如下: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> </div> 对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML

  • 基于JQuery实现鼠标点击文本框显示隐藏提示文本

    基于JQuery实现鼠标点击文本框显示隐藏提示文本

    比如本人网站的搜索框: 不使用的时候: 鼠标点击后: 用JQuery实现这个效果非常简单,下面是代码: 复制代码 代码如下: $(document).ready(function () { var searchBox = $("#ctl00_txtSearch"); searchBox.focus(function () { if (searchBox.val() == this.title) { // TextBox控件ToolTip属性转换为Html为title属性 searchB

  • jquery实现点击展开列表同时隐藏其他列表

    jquery实现点击展开列表同时隐藏其他列表

    本文实例讲述了jquery实现点击展开列表同时隐藏其他列表.分享给大家供大家参考.具体如下: 这里使用jquery实现展开.隐藏特效,点击列表标题后该项内容展开,其它项收缩起来,也就是不显示了.个人喜好了,有的喜欢在默认状态下不显示其它选项的内容,这个就是这种情况,仅供参考吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

  • JQuery控制div外点击隐藏而div内点击不会隐藏的方法

    本文实例讲述了JQuery控制div外点击隐藏而div内点击不会隐藏的方法.分享给大家供大家参考.具体如下: 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: 复制代码 代码如下: $("#body").click(function(e) {      $(this).show();          e.stopPropagation();  });  $(document).click(function(event) {   

  • JQuery实现点击div以外的位置隐藏该div窗口

    jquery实现鼠标点击div外的地方div窗口隐藏消失的 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • Jquery 点击按钮显示和隐藏层的代码

    代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"

  • Jquery实现点击切换图片并隐藏显示内容(2种方法实现)

    我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['

  • 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') ) { $

  • Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)

    在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表.然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表? 解决思路如下:在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件的默认行为和冒泡.当响应这个点击事件的时候,说明是在下拉列表范围外的点击(因为下拉列表内阻止了事件的冒泡),就可以关闭已经打开的下拉列表. 如果是纯 JS 代码,有人可能会使用

  • jQuery实现指定区域外单击关闭指定层的方法【经典】

    本文实例讲述了jQuery实现指定区域外单击关闭指定层的方法.分享给大家供大家参考,具体如下: 在页面上指定区域外单击,关闭层.常见效果为弹出层外单击,关闭弹出层.今天遇到一个这样的效果,用jQuery实现起来挺简单的,顺便复习了一下相关知识. $(document).mouseup(function(e){ if($(e.target).parent("#big_map").length==0){ $("#big_map").hide("fast&quo

  • jQuery实现提交表单时不提交隐藏div中input的方法

    jQuery实现提交表单时不提交隐藏div中input的方法

    本文实例讲述了jQuery实现提交表单时不提交隐藏div中input的方法.分享给大家供大家参考,具体如下: 今天做一个功能 想在下拉列表中根据下拉的选项隐藏对应的div有个平台选择的下拉列表,我想在选择pc的时候出现水平以下的内容并且提交水平线以下的input下拉列表选择app的时候会隐藏水平线以下的input,但这时候不想提交隐藏div的input的值,这时候在隐藏div的时候就需要做以下操作 function choosePlatform(platform) { if(platform =

  • jQuery基于闭包实现的显示与隐藏div功能示例

    本文实例讲述了jQuery基于闭包实现的显示与隐藏div功能.分享给大家供大家参考,具体如下: <div class="binds"> <div class="phonebind"> <h3>手机绑定</h3> <p>当前手机号码:<span id="oldPhone">$!{user.phone}</span><input type="butto

  • jQuery打印指定区域Html页面并自动分页

    最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件 用法: $("div#printmain").printArea(); 但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页 <div style="page-break-after: always;"></div> 有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件中的属性参数. PrintArea

  • jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例

    -1.右侧弹出导航菜单完整代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

  • Android悬浮窗按钮实现点击并显示/隐藏多功能列表

    前言 最近在一个项目中,需要制作录屏的功能,原先是在应用中有录屏/控制的按钮,思考之下觉得这种效果并不好,因此就想制作一个可以悬浮的悬浮窗,这样不论手机在什么界面中都可以对录屏功能进行控制. 这里就来构建一个桌面的悬浮窗,使用了DataBinding的MVVM模式,这些方面就不再多提. FloatNormalView 这个是一个普通的悬浮窗,悬浮窗只有一个按钮,点击按钮显示更多的按钮. 首先是页面布局: <?xml version="1.0" encoding="utf

随机推荐