点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre)。点击圆头像以外的区域隐藏白色底框

aaarticlea/png;base64,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" alt="" />

html代码

<div class="per_c">
<div class="person-msg pull-right">
<img src="../../res/images/snow_man.jpg">
</div>
<dl class="person-centre" style="display: none;">
<dt>你好!大雪人</dt>
<dd><a href="#">账号安全</a></dd>
<dd><a href="#">修改资料</a></dd>
<dd><a href="#">我的头像</a></dd>
<dd><a href="#">我的申请</a></dd>
<dd><a href="#">账号退出</a></dd>
</dl>
</div>

jquery方法

/*点击头像个人信息*/
$(".person-msg").click(function () {
$(".person-centre").toggle(); });
$(document).bind("click",function (e) {
var target=$(e.target);
if(target.closest(".person-msg").length==0){
$(".person-centre").hide();
console.log("111")
}
});

closest()从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。

target 属性规定哪个 DOM 元素触发了该事件。

target.closest(".person-msg"):遍历".person-msg"触发事件

if(target.closest(".person-msg").length==0):判断条件为(如果遍历后发现".person-msg"没有触发click事件)

可以查看w3c,了解这两个方法的使用。

后续有更新再慢慢补充

更6的方法移步:http://bbs.blueidea.com/thread-3043426-1-1.html

之前打算使用监听来写,但是有兼容问题而且不够了解。

遍历的方法:http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp

注意区分e.target与e.currentTarget的作用

jquery点击非div区域隐藏div的更多相关文章

  1. Js-Html 前端系列--点击非Div区域隐藏Div

    最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击. 后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了. 背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择, ...

  2. jquery点击按钮显示和隐藏DIv

    function changeDisplay() { if ($("#btnShow").attr("value")== "添加附件") { ...

  3. jquery点击页面其他位置隐藏div

    $("#btnAdd").on('click', function (e) { $("#setUp").toggle(); $(document).one('c ...

  4. React 点击按钮显示div与隐藏div,并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  5. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

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

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

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

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

  8. JQ 点击指定文本框显示div。点击其他区域隐藏DIV

    <input id="username" type="text" style="width:90%;margin-top: 40px;" ...

  9. jquery实现点击div外隐藏div

    html <div style="width:100px;height:100px;border:1px solid #ff0" id="div"> ...

随机推荐

  1. stm32通过电调带动电机(可按键调速)

    这几天在做32通过电调带动电机的实验,上网一查,发现这方面的资料很少,经过自己的亲自实践,总结出以下经验,供大家参考. 论坛上也有很多人说自己在做,但是都遇到了同样的瓶颈.我想他们大多是pwm的频率和 ...

  2. CSAcademy Beta Round #4 Swap Pairing

    题目链接:https://csacademy.com/contest/arhiva/#task/swap_pairing/ 大意是给2*n个包含n种数字,每种数字出现恰好2次的数列,每一步操作可以交换 ...

  3. 商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)

    前言 本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 现在很多的 APP 里面都有自己的自定义风格,特别是京东商城中自 ...

  4. Eclipse导入Android签名

    本篇主要参照http://blog.csdn.net/wuxy_shenzhen/article/details/20946839 在安装安卓apk时经常会出现类似INSTALL_FAILED_SHA ...

  5. DFB系列 之 Clear清空surface缓存

    1. 函数原型解析 函数声明: DFBResult Clear (     IDirectFBSurface    *  thiz,      u8     r,      u8     g,     ...

  6. office web apps 整合Java web项目

    之前两篇文章将服务器安装好了,项目主要的就是这么讲其整合到我们的项目中,网上大部分都是asp.net的,很少有介绍Java如何整合的,经过百度,终于将其整合到了我的项目中. 首先建个servlet拦截 ...

  7. 蓝桥杯-循环节长度-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  8. python基本运算

    环境:python3.x a,b = 60,164 一.算数运算符 操作符 描述 例子 + 加法 a+b = 224 - 减法 a-b = -104 * 乘法 a*b = 9840 / 除(保留小数位 ...

  9. .Net程序员学用Oracle系列(23):视图理论、物化视图

    1.视图理论 1.1.视图的存储 1.2.视图的作用 1.3.视图的工作机制 1.4.视图的依赖性 1.5.可更新的连接视图 1.6.内联视图 2.物化视图 2.1.刷新物化视图 2.2.物化视图日志 ...

  10. ui-router多视图+嵌套视图+传参综合练习

    ui-router多视图:页面上存在的多个ui-view,它们以名字区分: 嵌套视图:一个ui-view的一个状态下对应了一个html,这个html里面又有一个ui-view. 视图之间传参:用ui. ...