js点击页面其它地方将某个显示的DIV隐藏


Posted in Javascript onJuly 12, 2012

实现也很简单,但需要注意的是,在点击显示的事件中,需要做阻止事件冒泡的处理,否则就触发页面的点击事件了。但这样做也有一个缺点,即如果同一个页面中如果也有事件阻止冒泡,则不能隐藏DIV,所以在这样的事件中需要特殊处理下:自己调用隐藏下DIV(但正常来说这样的事件并不多);
JS:

$(document).ready(function() { 
//语言头部的点击事件,显示语言列表 
$(".language_selected").click(function(e) { 
$(".language_list").toggle(); 
e.stopPropagation(); //阻止事件冒泡,否则事件会冒泡到下面的文档点击事件 
}); 
//点击文档时,隐藏语言列表 
$(document).click(function() { 
$(".language_list").hide(); 
}); 
//点击语言列表中的语言项时,更新选中项,并隐藏语言列表 
$(".language_list li").click(function() { 
$(".language_selected").text($(this).text()); 
$(".language_list").hide(); 
}); 
$("#noPopEvent").click(function(e) { 
e.stopPropagation(); 
}); 
});

CSS:
.language_selected 
{ 
cursor: pointer; 
} 
.language_list 
{ 
border: 1px solid black; 
display: none; 
} 
.language_list li 
{ 
cursor: pointer; 
border: 1px solid red; 
}

HTML:
<div style="width: 200px"> 
<div class="language_selected"> 
中文(简体)</div> 
<div class="language_list"> 
<ul> 
<li>中文(简体)</li> 
<li>English</li> 
</ul> 
</div> 
</div> 
<div id="noPopEvent" style="width: 100px; height: 100px; border: 1px solid black;"> 
点击我,不隐藏语言列表,需要自己显示DIV 
</div>

Javascript 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
详解Node全局变量global模块
Sep 28 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
JavaScript面向对象之Prototypes和继承
Jul 12 #Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 #Javascript
js原型链原理看图说明
Jul 07 #Javascript
jqTransform form表单美化插件使用方法
Jul 05 #Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 #Javascript
JavaScript中变量提升 Hoisting
Jul 03 #Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 #Javascript
You might like
php的控制语句
2006/10/09 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
js 巧妙去除数组中的重复项
2010/01/25 Javascript
JavaScript 原型继承
2011/12/26 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
JavaScript字符串对象
2017/01/14 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
Python 文件和输入输出小结
2013/10/09 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python如何发布程序的详细教程
2018/10/09 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
python怎么判断模块安装完成
2020/06/19 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
幼儿园教师国培感言
2014/02/02 职场文书
晚归检讨书
2014/02/19 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang