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 相关文章推荐
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
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类中的各种拦截器用法分析
2014/11/03 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
python3中int(整型)的使用教程
2017/03/23 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
实习求职信
2013/12/01 职场文书
行政专员的岗位职责
2014/03/10 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
青年联谊会致辞
2015/07/31 职场文书
物业管理交接协议书
2016/03/24 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python