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高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 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教程 基本语法
2009/10/23 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
python每隔N秒运行指定函数的方法
2015/03/16 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
python学生管理系统
2019/01/30 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
python实现支付宝转账接口
2019/05/07 Python
NumPy排序的实现
2020/01/21 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
团工委书记自荐书范文
2013/12/17 职场文书
教室布置标语
2014/06/26 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
2015年党性分析材料
2014/12/19 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python