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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
jquery退出each循环的写法
Feb 26 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
详解用webpack2搭建angular2的项目
Jun 22 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
vue设置动态请求地址的例子
Nov 01 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
discuz的php防止sql注入函数
2011/01/17 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
showModelessDialog()使用详解
2006/09/07 Javascript
javascript编程起步(第六课)
2007/02/27 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
mysql 之通过配置文件链接数据库
2017/08/12 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
旅游管理实习自我鉴定
2013/09/29 职场文书
学生励志演讲稿
2014/01/06 职场文书
暑假家长评语大全
2014/04/17 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
升学宴家长答谢词
2015/09/29 职场文书
感谢信
2019/04/11 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
使用MybatisPlus打印sql语句
2022/04/22 SQL Server