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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
javascript实现五星评分功能
Nov 10 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
vue实现购物车小案例
Sep 27 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 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求最大子序列和的算法实现
2011/06/24 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
php文件操作相关类实例
2015/06/18 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
python学习教程之使用py2exe打包
2017/09/24 Python
深入理解Python中的*重复运算符
2017/10/28 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python3 max()函数基础用法
2019/02/19 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
后勤部长岗位职责
2013/12/14 职场文书
违反学校规定检讨书
2014/01/18 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
Python实现日志实时监测的示例详解
2022/04/06 Python