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

moluo 2014-02-08 04:10:56



<!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/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    $(".btn").click(function(){

		$(".div").toggle();

		})

});

</script>

<style>

*{

	margin:0;

	padding:0;

	}

.div{

	width:200px;

	height:200px;

	position:absolute;

	top:50px;

	left:100px;

	background:#00BCF3;

	display:none;

	}

</style>

</head>



<body>

<input class="btn" type="button" value="点击"/>

<div class="div"></div>

</body>

</html>

刚开始div是隐藏的我点击按钮使div显示那么怎么才能点击div以外空白的地方使div隐藏

...全文

18352 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

Z1X1C1 2016-10-17

打赏
举报

引用 5 楼 rui888 的回复:

判断 target

虽说这位高手解答太简练了，这个办法解决很多问题（冒泡，代码简洁），这位高手的楼上虽说解答有效，只是变复杂些了。这儿抛砖引玉吧。 $('body').click(function(e){ if(e.target.tagName=='BODY') { //你在此处要做什么了，比如隐藏DIV }

tony4geek 2014-02-10

打赏
举报

判断 target

莫待 2014-02-08

打赏
举报

$(document).ready(function () { $("*").click(function (event) { if (!$(this).hasClass("div")&&!$(this).hasClass("btn")){ $(".div").hide(); } event.stopPropagation(); }); });

吉普赛的歌社区高级成员 T9 2014-02-08

打赏
举报


<!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/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/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(); //阻止事件冒泡    
        });
    });
</script>
<style type="text/css">
*{
	margin:0;
	padding:0;
	}
.div{
	width:200px;
	height:200px;
	position:absolute;
	top:50px;
	left:100px;
	background:#00BCF3;
	display:none;
	}
</style>
</head>

<body>
<input class="btn" type="button" value="点击"/>
<div class="div"></div>
</body>
</html>

fujunle 2014-02-08

打赏
举报

<script language="javascript">
function displaymodifynone(){
var obj1=document.getElementById('xianshi')
obj1.style.display='none';
}
</script>
<input class="btn" onclick="javascript:displaymodifynone()" type="button" value="点击"/>
<div id="xianshi">ddd</div>

zhjdg 2014-02-08

打赏
举报

document.onclick =function(e){
	var target = e.target;
	var tc = target.className;
	if(tc.indexOf('div') ===-1){
		var tree = document.getElementsByTagName('div');
		for(var i=0;i<tree.length;i++){
			tree[i].style.display='none';
		}
	}
}