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 相关文章推荐
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
QT与javascript交互数据的实现
May 26 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 miniBB中文乱码问题解决方法
2008/11/25 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
深入理解vue中的$set
2017/06/01 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
Python绘制七段数码管实例代码
2017/12/20 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
人民调解员培训方案
2014/06/05 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
上课说话检讨书
2015/01/27 职场文书
出租车拒载检讨书
2015/01/28 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android