点击非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