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 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
原生JavaScript实现五子棋游戏
Nov 09 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缓存技术介绍
2006/11/25 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php使用google地图应用实例
2014/12/31 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
再谈javascript原型继承
2014/11/10 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
js动态引入的四种方法
2018/05/05 Javascript
详解React中setState回调函数
2018/06/14 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
Vue实现页面添加水印功能
2019/11/09 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
Python 可爱的大小写
2008/09/06 Python
列举Python中吸引人的一些特性
2015/04/09 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
乌克兰在线药房:Аптека24
2019/10/30 全球购物
工商管理应届生求职信
2013/10/07 职场文书
考试违纪检讨书
2014/02/02 职场文书
社区务虚会发言材料
2014/10/20 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
MySQL数据库查询之多表查询总结
2022/08/05 MySQL