jquery实现点击页面其他地方隐藏指定元素
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>点击页面其他地方隐藏div-蚂蚁部落</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.main{
cursor:pointer;
}
.list{
border:1px solid black;
display:none;
}
.list li{
cursor:pointer;
border:1px solid red;
list-style:none;
}
#noPopEvent{
width:100px;
height:100px;
background-color:blue;
font-size:12px;
margin:200px;
text-align:center;
line-height:100px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".main").click(function(e){
$(".list").toggle();
e.stopPropagation();
})
$(document).click(function(){
$(".list").hide();
})
$(".list li").click(function(){
$(".main").text($(this).text());
$(".list").hide();
})
$("#noPopEvent").click(function(e){
e.stopPropagation();
})
});
</script>
</head>
<body>
<div style="width:200px;margin:20px;">
<div class="main">蚂蚁部落</div>
<div class="list">
<ul>
<li>div+css教程</li>
<li>javascript教程</li>
</ul>
</div>
</div>
<div id="noPopEvent">点我不行</div>
</body>
</html>
一.实现原理:
原理很简单，蓝色区域的click事件采用了添加了阻止冒泡的功能，其他的地方都没有阻止冒泡，所以当点击的时候事件能够冒泡到document，然后将二级下拉才菜单隐藏。
二.代码注释:
1.$(document).ready(function(){ })，当文档结构加载岸壁再去执行函数中的代码。
2.$(".main").click(function(e){ }），当点击蚂蚁部落的时候能够实现二级下拉菜单隐藏和显示的切换。
3.$(".list").toggle()，下拉菜单显示和隐藏的切换。
4.e.stopPropagation()，阻止事件冒泡，否则的话冒泡都document，那么二级菜单始终处于隐藏状态。
5.$(document).click(function(){}），将click时间注册到document，这样点击任何其他地方都可以将事件冒泡到document，然后将二级菜单隐藏，除非阻止了事件冒泡效果。
6.$(".list").hide()，隐藏二级菜单。
7.$(".list li").click(function(){}），点击二级菜单的某一项，能够将当前文本写入主体中去，然后再隐藏二级菜单。
8.$(".main").text($(this).text())，将点击的二级菜单的文本写入主体中去。
9.$(".list").hide()，隐藏二级下拉菜单。
10.$("#noPopEvent").click(function(e){}），为蓝色块注册事件处理函数，不过阻止了事件冒泡效果，所以二级菜单不会隐藏。
jquery实现点击页面其他地方隐藏指定元素的更多相关文章
- jQuery 实现点击页面其他地方隐藏菜单
点击页面其它地方隐藏id为messageList的div 代码: $('body').delegate("#message", 'click', function(e) { var ...
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- 点击页面其它地方隐藏该div的两种思路
思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...
- 点击页面其它地方隐藏该div的方法
思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...
- JS如何实现点击页面其他地方隐藏菜单？
方法一: $("#a").on("click", function(e){ $("#menu").show(); $(documen ...
- js点击页面其他地方如何隐藏div元素菜单
web页面常用的一个需求,写下拉菜单是我们往往不是用select_option,而是自定义一个元素列出选项来满足需求,当我们点击按钮出现菜单, 点击按钮或菜单以外页面空白地方隐藏该菜单,这里提供一种简 ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- JS 实现点击页面任意位置隐藏div、span
通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...
随机推荐
- T4 Templates
T4 Templates and the Entity Framework https://msdn.microsoft.com/en-us/data/gg558520.aspx EF Designe ...
- xunsearch增量索引改进版
最近测试了xunserach全文索引程序.xunsearch只有LINUX版,所以想用windows服务器请使用其它全文索引程序.xunsearch本身不像coreseek那样自带增量索引的功能,所以 ...
- ASP.NET会话（Session）保存模式--终于知道session为什么丢失了
[原创]ASP.NET会话(Session)保存模式 作者:寒羽枫(cityhunter172) 大家好,已有四个多月没写东东啦.今日抽空就说一下 Session 在 .Net v1.0/v1.1 中 ...
- java读写文件大全
java读写文件大全 最初java是不支持对文本文件的处理的,为了弥补这个缺憾而引入了Reader和Writer两个类,这两个类都是抽象类,Writer中 write(char[] ch,int o ...
- 转载：使用sklearn做单机特征工程
目录 1 特征工程是什么?2 数据预处理 2.1 无量纲化 2.1.1 标准化 2.1.2 区间缩放法 2.1.3 标准化与归一化的区别 2.2 对定量特征二值化 2.3 对定性特征哑编码 2.4 缺 ...
- ASP.NET MVC3升级到ASP.NET MVC4 的方法
ASP.NET MVC3升级 ASP.NET MVC4 的方法: 1.先去掉引用的System.Web.Mvc.dll(MVC3版本),重新引入System.Web.Mvc.dll(MVC4版本) 2 ...
- php 同步因子的并发处理
在php中,如果处理支付时,会涉及到并发. 具体体现在同步通知支付结果和异步通知结果. 拿支付宝来说,同步通知call_back和异步通知notify是没有固定先后顺序的. 有可能notify先通知到 ...
- RMAN备份与恢复之不完全恢复
要点:对于RMAN的不完全恢复,有如下步骤: 1)加载数据到mount状态(建议恢复前先做备份) 2)为高并发分配多个通道 3)还原所有(所需)的数据文件 4)使用until time,until s ...
- 【oracle】 linux 下oracle 启动监听错误
Message 1070 not found; No message file for product=network, facility=TNSTNS-12545: Message 12545 no ...
- VBA 插入一行保留样式
Rows(processingRow).Insert ' 在指定的行数processingRow处插入一行 Rows(processingRow - 1).Select ' 选择上一行的整行 Sele ...