一、正常頁面

$(document).click(function(){$(dom).hide();//要隱藏的div});

這個是最基礎的原型，如果是有彈窗和遮罩層的，點擊遮罩層的部分關閉彈窗和遮罩層：

// 點擊彈窗內容以外的地方關閉彈窗 .user-list-classify-mask：遮罩層 .user-list-classify：實際的小彈窗區域$(".user-list-classify-mask").on('click', function (e) {if ($(e.target).closest('.user-list-classify').length == 0) {$(".user-list-classify-mask").hide();} });因為遮罩層是覆蓋了整個屏幕的，所以一般就遮罩住了觸發的那個元素，所以這個就不用除去觸發的元素了

還有一種是沒有遮罩層，但是會同步出現很多彈窗的list：

.pops:觸發彈窗的元素 .ellipsis-pop：一開始隱藏的定位彈窗 有很多td css： .report-operation-pop{ position:relative; } .report-operation-pop img{width:20px;cursor:pointer; } .ellipsis-pop{position:absolute;right:0;top:49px;width:120px;background:#fff;-webkit-box-shadow: 0 0 6px rgba(0,0,0,.15);box-shadow: 0 0 6px rgba(0,0,0,.15);-o-box-shadow: 0 0 6px rgba(0,0,0,.15);-ms-box-shadow: 0 0 6px rgba(0,0,0,.15);-moz-box-shadow: 0 0 6px rgba(0,0,0,.15);border-radius:3px;padding:10px;box-sizing:border-box;z-index:999;display:none; } html： <td class="t-a-l report-operation-pop"><img src="../../../include/images/dian.png" class="pops"><div class="ellipsis-pop"><a class="operation-btn">刪除</a><a class="operation-btn">詳情</a>……很多按鈕</div> </td> js： //操作欄的點擊事件$("#report_table").on("click",".pops",function(){$(this).next().toggle();//顯示隱藏toggle$(this).parents('tr').siblings().find('.ellipsis-pop').hide();//只能一個pop顯示，其他的pop隱藏var topH = $(this).parents('td').outerHeight();$(this).next().css('top',topH/2+8)//pop的top值為td的高度的一半+一個適當的錯開值})$(document).on('click', function (e) {//點擊除pop之外的區域隱藏pop彈窗 但是要把觸發的···去掉，不然點擊···pop就不會show了if ($(e.target).closest('.ellipsis-pop').length == 0 && $(e.target).closest('.pops').length == 0) {$(".ellipsis-pop").hide();} });

二、嵌套iframe頁面 （我實現的是點擊子頁面隱藏父頁面的元素）

除了寫正常頁面的操作之外，也需要在子頁面里面寫第二個操作

$(document).click(function(){//父頁面$(dom).hide();//要隱藏的div});$(document).click(function(){//子頁面$(dom,window.parent.document).hide();});

因為子頁面里不能直接獲取到父頁面的元素，所以需要在子頁面里面另外寫：
$(dom,window.parent.document).hide();

補充：jquery中父子頁面之間獲取元素

父頁面獲取子頁面元素：

$("#iframe的ID").contents().find("#iframe子頁面的ID").click();

父頁面調用子頁面方法：

$("#iframe的ID")[0].contentWindow.子頁面 js 方法();

子頁面獲取父頁面元素：

$("#父頁面元素ID" , parent.document);

子頁面操作父頁面方法：

window.parent.父頁面 js 方法();

總結

以上是生活随笔為你收集整理的点击div外区域隐藏div操作(嵌套iframe页面)的全部內容，希望文章能夠幫你解決所遇到的問題。

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