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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
Node爬取大批量文件的方法示例
Jun 28 Javascript
使用JavaScript通过前端发送电子邮件
May 22 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中如何调用webservice的实例参考
2013/04/25 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
javascript 写类方式之一
2009/07/05 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
Python实例一个类背后发生了什么
2016/02/09 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python反射的用法实例分析
2018/02/11 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
绘画设计学生的个人自我评价
2013/09/20 职场文书
运动会广播稿200字
2014/01/15 职场文书
环保建议书
2014/03/12 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
演讲稿格式
2014/04/30 职场文书
销售活动策划方案
2014/08/26 职场文书
就业推荐表导师评语
2014/12/31 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL