怎么jq点击空白处隐藏divdiv以外空白的地方 使div隐藏

来源：蜘蛛抓取(WebSpider) 时间：2017-10-26 05:14 标签： 点击空白区域隐藏div
AngularJS中怎样实现点击页面的任意地方隐藏指定div？ - 知乎2被浏览1346分享邀请回答12 条评论分享收藏感谢收起写回答JQuery实现点击div以外的位置隐藏该div窗口
字体：[ ] 类型：转载 时间：
鼠标点击div外的地方让div窗口隐藏消失，实现方法有很多，在本文将为大家介绍下jquery中时如何实现的，感兴趣的朋友不要错过了哈
jquery实现鼠标点击div外的地方div窗口隐藏消失的 代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &meta http-equiv="Content-Type" content="text/ charset=utf-8" /& &title&网页特效展示中心&/title& &style type="text/css"& .pop { width:200 height:130 background:#080;} &/style& &/head& &body& &script type="text/javascript" src="/ajax/libs/jquery/1.7.1/jquery.min.js"&&/script& &script type="text/javascript"& $(function(){ $(document).bind("click",function(e){ var target = $(e.target); if(target.closest(".pop").length == 0){ $(".pop").hide(); } }) }) &/script& &div class="pop"&&/div& 点击空白的地方指定div 隐藏消失了 &/body& &/html&
代码如下: class="bigPic"的div是被显示或隐藏的div，另外.case & ul & li是class="bigPic"的父级元素 $("body").bind("click",function(evt){ if($(evt.target).parents(".case & ul & li").length==0) { $('.bigPic').hide(); } });
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具怎么点击div以外空白的地方 使div隐藏 -CSDN论坛
JavaScript
怎么点击div以外空白的地方 使div隐藏
&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html&xmlns="http://www.w3.org/1999/xhtml"&
&meta&http-equiv="Content-Type"&content="text/&charset=utf-8"&/&
&title&无标题文档&/title&
&script&type="text/javascript"&src="/jquery-1.11.0.min.js"&&/script&
&script&type="text/javascript"&
$(document).ready(function(){
&&&&$(".btn").click(function(){
$(".div").toggle();
padding:0;
height:200
background:#00BCF3;
&input&class="btn"&type="button"&value="点击"/&
&div&class="div"&&/div&
刚开始div是隐藏的&我点击按钮使div显示&那么怎么才能点击div以外空白的地方&使div隐藏&
document.onclick&=function(e){
var&target&=&e.
var&tc&=&target.classN
if(tc.indexOf('div')&===-1){
var&tree&=&document.getElementsByTagName('div');
for(var&i=0;i&tree.i++){
tree[i].style.display='none';
&script&language="javascript"&
function&displaymodifynone(){
var&obj1=document.getElementById('xianshi')
obj1.style.display='none';
&input&class="btn"&onclick="javascript:displaymodifynone()"&type="button"&value="点击"/&
&div&id="xianshi"&ddd&/div&
&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html&xmlns="http://www.w3.org/1999/xhtml"&
&meta&http-equiv="Content-Type"&content="text/&charset=utf-8"&/&
&title&无标题文档&/title&
&script&type="text/javascript"&src="/jquery-1.11.0.min.js"&&/script&
&script&type="text/javascript"&
&&&&$(document).ready(function&()&{
&&&&&&&&$("*").click(function&(event)&{
&&&&&&&&&&&&if&(!$(this).hasClass("div")){
&&&&&&&&&&&&&&&&$(".div").toggle();
&&&&&&&&&&&&}
&&&&&&&&&&&&event.stopPropagation();&//阻止事件冒泡&&&&
&&&&&&&&});
&style&type="text/css"&
padding:0;
height:200
background:#00BCF3;
&input&class="btn"&type="button"&value="点击"/&
&div&class="div"&&/div&
$(document).ready(function&()&{
&&&&&&&&$("*").click(function&(event)&{
&&&&&&&&&&&&if&(!$(this).hasClass("div")&&!$(this).hasClass("btn")){
&&&&&&&&&&&&&&&&$(".div").hide();
&&&&&&&&&&&&}
&&&&&&&&&&&&event.stopPropagation();&&&
&&&&&&&&});
判断&&target&&
引用&5&楼&rui888&的回复:判断&&target&&
虽说这位高手解答太简练了，这个办法解决很多问题（冒泡，代码简洁），这位高手的楼上虽说解答有效，只是变复杂些了。
这儿抛砖引玉吧。
$('body').click(function(e){
if(e.target.tagName=='BODY')
//你在此处要做什么了，比如隐藏DIV
回复

我要回帖

更多关于 点击空白区域隐藏div 的文章

 

随机推荐