jquery点击非div区域隐藏div
点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre)。点击圆头像以外的区域隐藏白色底框
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的作用
更多专业前端知识,请上 【猿2048】www.mk2048.com
jquery点击非div区域隐藏div相关推荐
- jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...
- jquery点击页面其他位置隐藏div
//设置 document.onclick = function (e) { $("#setUp").hide(); } $('#btnAdd').on("click&q ...
- html中怎么实现广告自动出来又自动隐藏?,基于jquery实现的定时显示与隐藏div广告的实现代码...
基于jquery实现的定时显示与隐藏div广告的实现代码 下面我给大家分享我的方法: 在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了,但要定时我们需要利用setTime ...
- 点击按钮显示或隐藏Div块
通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换. 代码如下: 方法一: <!DOCTYPE html> <html> <head><script s ...
- React 点击按钮显示div与隐藏div
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>R ...
- react实现div隐藏_React 点击按钮显示div与隐藏div
React 点击按钮显示div与隐藏div .m-test{width: 100px;height: 100px;background-color: red;} class Toggle extend ...
- HTML下拉菜单去掉点,jQuery点击页面其他部分隐藏下拉菜单功能
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...
- 自定义开发popup点击非popup区域关闭popup
自定义开发popup弹窗组件点击非popup区域关闭popup 如果是vue项目在vue的生命周期onMounted方法里面添加如下代码: onMounted(async ()=>{await ...
- jQuery点击网页任意空白区域隐藏div
JS代码: $(function () { $('#btnShow').click(function (event) { //取消事件冒泡 event.stopPropagation(); //按钮的 ...
最新文章
- Spring Security 实战干货:自定义异常处理
- Matlab图形绘制经典案例 (1)
- zabbix添加端口监控
- 移动界面控件Essential Studio for Mobile MVC图表控件解析
- redis java对象操作
- OpenGL perpixelgloss逐像素光泽度的实例
- 华为android系统最新版,谷歌再放大招截胡鸿蒙系统!发布最新版安卓系统:国产手机抢先升级...
- == 和 is 的区别
- 李宏毅机器学习(二)自注意力机制
- Spring安装与入门
- Bailian2925 大整数的因子【模除】
- 什么是python构造方法_什么是Python?
- 剑指offer——数组中重复的数字
- 数据库(学习整理)----5--Oracle常用的组函数
- su灯光插件_lightup插件下载|lightup for sketchup下载v4.0中文免费版 附使用教程 - 欧普软件下载...
- linux gtk主题安装教程,如何获取、安装和制作 GTK 主题
- 苹果各版本手机更换电池的视频
- DELL R730xd 安装PCIE SSD 后风扇转速增高的解决方案
- 商家们为何在私域流量展开竞争?
- 2017.3.15 贾老分享有感