點擊非div區(qū)域隱藏div，如圖，點擊圓的頭像（.person-msg）彈出白色底框(.person-centre)。點擊圓頭像以外的區(qū)域隱藏白色底框

?

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 屬性規(guī)定哪個 DOM 元素觸發(fā)了該事件。

target.closest(".person-msg")：遍歷".person-msg"觸發(fā)事件

if(target.closest(".person-msg").length==0)：判斷條件為（如果遍歷后發(fā)現".person-msg"沒有觸發(fā)click事件）

可以查看w3c，了解這兩個方法的使用。

后續(xù)有更新再慢慢補充

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

之前打算使用監(jiān)聽來寫，但是有兼容問題而且不夠了解。

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

注意區(qū)分e.target與e.currentTarget的作用

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的jquery点击非div区域隐藏div的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。