你的位置:首页 > Java教程

[Java教程]jquery实现点击页面其他地方隐藏指定元素


jquery实现点击页面其他地方隐藏指定元素:
在很多效果中,都有这样的功能,当点击页面的其他地方时,能够隐藏一个指定的元素,例如在模拟实现的select下拉菜单效果中,当下拉菜单出现的时候,我们往往希望当点击页面其他地方的时候,能够隐藏下拉条,下面就通过一个实例单独介绍一下如何实现此功能。
代码实例如下:

<!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){}),为蓝色块注册事件处理函数,不过阻止了事件冒泡效果,所以二级菜单不会隐藏。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8527

更多内容可以参阅:http://www.softwhy.com/jquery/