码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现点击页面其他地方隐藏指定元素

时间:2015-12-31 10:30:46      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

代码实例如下:
<!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实现点击页面其他地方隐藏指定元素

标签:

原文地址:http://www.cnblogs.com/mmx-jiayou/p/5090766.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!