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实现点击页面其他地方隐藏指定元素

相关文章