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拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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
模仿OSO的论坛(四)
2006/10/09 PHP
php5 mysql分页实例代码
2008/04/10 PHP
php删除数组元素示例分享
2014/02/17 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python使用folium库绘制地图点击框
2018/09/21 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python判断链表是否有环的实例代码
2020/01/31 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
中科前程Java笔试题
2016/11/20 面试题
教师演讲稿范文
2014/01/08 职场文书
党风廉设责任书
2014/04/16 职场文书
小学生倡议书范文
2014/05/13 职场文书
某某同志考察材料
2014/05/28 职场文书
小学班主任培训方案
2014/06/04 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书