代码实例如下:

<!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. 点击页面其它地方隐藏div所想到的jQuery的delegate

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

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

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

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

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

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

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

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

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

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

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

  7. android 实现点击listview 空白地方隐藏菜单

    思路:重写ListView的setOnTouchListener事件: ListView.setOnTouchListener(new OnTouchListener(){ @Override pub ...

  8. 如何使页面滚动条移动到指定元素element的位置处?

    如何使页面滚动条移动到指定元素element的位置处? 在用selenium做测试时,会遇到需要操作的元素不在当前可视页面中的情况,如果是手工测试,自然很简单,手动拖拽滚动条到目标元素处即可. 那么, ...

  9. jquery 点击页面其他地方实现隐藏菜单功能

    1.给页面文档添加一个点击事件函数,在函数内实现隐藏菜单功能. $('html').click(function(){//Hide the menus if visible});//用$(docume ...

随机推荐

  1. Android 打开方式选定后默认了改不回来?解决方法(三星s7为例)

    Android 打开方式选定后默认了改不回来?解决方法(三星s7为例) 刚刚在测试东西,打开一个gif图,然后我故意选择用支付宝打开,然后...支付宝当然不支持,我觉得第二次打开它应该还会问我,没想到 ...

  2. Class PLBuildVersion is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/AssetsLibr

    网上找了一大堆,没有解决的办法 ,主要是iOS10的适配问题,info.plist里没有加对. 访问相册,我只加了 <!-- 相册 --> <key>NSPhotoLibrar ...

  3. iOS开发ARC内存管理技术要点

    本文来源于我个人的ARC学习笔记,旨在通过简明扼要的方式总结出iOS开发中ARC(Automatic Reference Counting,自动引用计数)内存管理技术的要点,所以不会涉及全部细节.这篇 ...

  4. ng animate

    要在angular中加入动画必须引入angular.animate.js插件,然后就可以在module中引入ngAnimate模块.如: var module1 = angular.module('m ...

  5. maven 简介

    本书代码下载 大家可以从我的网站下载本书的代码:http://www.juvenxu.com/mvn-in-action/,也可以通过我的网站与我取得联系,欢迎大家与我交流任何关于本书的问题和关于Ma ...

  6. hdu 4061 福州赛区网络赛A 数学 ***

    a1/sum #include<cstdio> #include<iostream> #include<algorithm> #include<cstring ...

  7. CF 628B New Skateboard --- 水题

    CD 628B 题目大意:给定一个数字(<=3*10^5),判断其能被4整除的连续子串有多少个 解题思路:注意一个整除4的性质: 若bc能被4整除,则a1a2a3a4...anbc也一定能被4整 ...

  8. SQL 2012 alwayson设置只读路由

    ALTER AVAILABILITY GROUP [sqlmaxiangqianbd]  MODIFY REPLICA ON   N'maxiangqian1' WITH   (SECONDARY_R ...

  9. CI 框架中的自定义路由规则

    在 CI 框架中,一个 URL 和它对应的控制器中的类以及类中的方法是一一对应的,如: www.test.com/user/info/zhaoyingnan 其中 user 对应的就是控制器中的 us ...

  10. UI学习笔记---第三天

    视图控制器 功能:视图大小变换 \布局视图\响应事件\检测处理内存警告\检测以及处理屏幕旋转\检测视图切换 MVC (model View controller) UIViewController是M ...