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系列(3) 全面解析Module模式
Jan 15 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
vue v-for直接循环数字实例
Nov 07 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
JS面向对象编程详解
2016/03/06 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
Python selenium 三种等待方式解读
2016/09/15 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
Python pip 常用命令汇总
2020/10/19 Python
索尼巴西商店:Sony巴西
2019/06/21 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
应聘编辑职位自荐信范文
2014/01/05 职场文书
幼儿教师求职信
2014/05/24 职场文书
授权委托书协议书
2014/10/16 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书