点击非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. html 初始化

    //  html 初始化 <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

  2. CF #335 div1 A. Sorting Railway Cars

    题目链接:http://codeforces.com/contest/605/problem/A 大意是对一个排列进行排序,每一次操作可以将一个数字从原来位置抽出放到开头或结尾,问最少需要操作多少次可 ...

  3. 查询sql server进程死锁方案

    SELECT a.spid , a.blocked , lastwaittype = RTRIM( a.lastwaittype ), waitresource = RTRIM( a.waitreso ...

  4. mysql查询今天、昨天、7天、近30天、本月、上一月 数据

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...

  5. Windows10 图标重建

    Windows10 图标重建 有没有遇到电脑上某个图标成了黑块,白块或者没有图呢. 那这样的话就可以使用图标重建啦. 删掉Windows10的图标文件如下图 路径: %userprofile%\App ...

  6. linux网络设置和虚拟机克隆转移之后Error:No suitable device found:no device found for connection 'System eth0'问题解决

    以root用户登录 #vi  /etc/sysconfig/network-scripts/ifcfg-eth0     #编辑配置文件,添加修改以下内容 BOOTPROTO=static   #启用 ...

  7. ACE框架 同步原语设计

    ACE框架常用的同步机制设计成统一的原语接口.同步原语使用系统平台(操作系统,多线程库)提供的同步原语,并为系统平台不提供的同步原语提供模拟实现.ACE框架使用了外观模式和适配器分两层,将同步原语统一 ...

  8. asp.net 母版-页脚制作

    1.母版创建流程略过. 2.创建母版页css:Site.css body { } .linkButton{ text-decoration:none; color:whitesmoke; } 3.母版 ...

  9. 企业Centos服务器分区常用方案

    方案一: 一般公司生产环境,数据不是非常重要,集群架构中的一个节点服务器: /boot: 200M swap: 8G内存以下,1.5倍 8G内存以上,设置8G就够了 / : 剩下的所以存储空间 方案二 ...

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

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