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代码经典广告
Oct 21 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
jquery validate表单验证插件
Sep 06 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
vue-cli常用设置总结
Feb 24 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
vue 实现element-ui中的加载中状态
Nov 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中的fopen()函数用打开文件模式说明
2013/06/20 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
详解jQuery事件
2017/01/13 Javascript
基本DOM节点操作
2017/01/17 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
一个Python最简单的接口自动化框架
2018/01/02 Python
python让列表倒序输出的实例
2018/06/25 Python
Python Grid使用和布局详解
2018/06/30 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
水污染治理专业毕业生推荐信
2013/11/14 职场文书
区域销售经理职责
2013/12/22 职场文书
对公司合理化的建议书
2014/03/12 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
初中生操行评语大全
2014/04/24 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
《海上日出》教学反思
2016/02/23 职场文书
2019教师的学习计划
2019/06/25 职场文书