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 String 对象
Apr 25 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
js资料toString 方法
2007/03/13 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python保存字符串到文件的方法
2015/07/01 Python
Python正则捕获操作示例
2017/08/19 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Python多进程写入同一文件的方法
2019/01/14 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
粗加工管理制度
2014/02/04 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
华山导游词
2015/02/03 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
Docker下安装Oracle19c
2022/04/13 Servers
Win11查看设备管理器
2022/04/19 数码科技