代码实例如下:

<!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实现点击页面其他地方隐藏指定元素的更多相关文章

  1. jQuery 实现点击页面其他地方隐藏菜单

    点击页面其它地方隐藏id为messageList的div 代码: $('body').delegate("#message", 'click', function(e) { var ...

  2. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

  3. 由点击页面其它地方隐藏div所想到的jQuery的delegate

    对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...

  4. 点击页面其它地方隐藏该div的两种思路

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

  5. 点击页面其它地方隐藏该div的方法

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

  6. JS如何实现点击页面其他地方隐藏菜单？

    方法一: $("#a").on("click", function(e){  $("#menu").show();    $(documen ...

  7. js点击页面其他地方如何隐藏div元素菜单

    web页面常用的一个需求,写下拉菜单是我们往往不是用select_option,而是自定义一个元素列出选项来满足需求,当我们点击按钮出现菜单, 点击按钮或菜单以外页面空白地方隐藏该菜单,这里提供一种简 ...

  8. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  9. JS 实现点击页面任意位置隐藏div、span

    通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...

随机推荐

  1. 非对称SVD电影推荐系统

    采用1M MovieLensz数据(80%train, 20%test, UserIDs range between 1 and 6040 ,MovieIDs range between 1 and ...

  2. java-源码下载

    jdk7 下载: http://download.java.net/openjdk/jdk7/ jdk8 下载: http://download.java.net/openjdk/jdk8/

  3. Create STATISTICS，UPDATE STATISTICS

    该命令在一张表或者索引了的视图上更新查询优化统计数字信息. 默认情况下, 查询优化器已经更新了必要的用来提高查询计划的统计信息; 在某些情况下, 你可以通过使用UPDATE STATISTICS 命令 ...

  4. shell知识点

    各个项目以实践为主.原理及更多细节介绍,请查看官方文档: 例如:bash,grub,postfix,pam,fastcgi,httpd,rsync等诸多项目. 各种总结表格 http://www.cn ...

  5. cocos2d-x，求世界坐标

    老版: http://user.qzone.qq.com/350479720/blog/1384483239 一,求node的世界坐标.因为node的contentSize为0,局部坐标原点与node ...

  6. 命名空间"system.web"中不存在类型或命名空间名称security"

    在webservice中添加了一个md5加密报错: "命名空间"system.web"中不存在类型或命名空间名称security" 在引用中添加System.W ...

  7. SELECT INTO 和 INSERT INTO SELECT 两种表复制语句.txt

    Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) values(value1,value2,...)这种形式的在应用程序开发中必不可少.但我 ...

  8. Jfinal中log4j的配置

    基本不用配置: 1.web.xml不用配置: 2.添加文件log4j.properties到src下面: 3.lib中复制log4j的jar包进去: 4.可以使用了; package demo; im ...

  9. MongoDB shell 格式化

    直接的方法: db.collection.find().pretty(); 如果想要所有的查询都格式化,可以执行: echo "DBQuery.prototype._prettyShell ...

  10. 给Jquery动态添加的元素添加事件2

    $('div').on('click', 'button', function(e){console.log($(e.target).is(':button'))}); $('<button&g ...