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实现复制功能各浏览器支持情况实测
Jul 18 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
vue之debounce属性被移除及处理详解
Nov 13 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输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
php生成短域名函数
2015/03/23 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python进程间通信之共享内存详解
2017/10/30 Python
利用python循环创建多个文件的方法
2018/10/25 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
一年级数学教学反思
2014/02/01 职场文书
服务行业口号
2014/06/11 职场文书
2015年司法局工作总结
2015/05/22 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
浅谈python数据类型及其操作
2021/05/25 Python
Java基础之this关键字的使用
2021/06/30 Java/Android
Redis分布式锁Redlock的实现
2021/08/07 Redis
一篇文章弄懂Python中的内建函数
2021/08/07 Python
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript
Java 多线程并发FutureTask
2022/06/28 Java/Android