js隐藏div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js隐藏div相关的知识，希望对你有一定的参考价值。
现有一个div 当鼠标点在这个div之外的其他地方时 隐藏这个div 请问这个效果用js应该怎么做
参考技术A 思路是这样的：点击任何地方div隐藏：所以这个click事件应该是由body触发的，因为body是页面的全部了，所以有<body onclick="document.getElementById('divId').style.display = 'none';">
如果点击的是当前这个div，不隐藏：所以div接收到click事件之后要阻止事件冒泡传递给body，这样就可以避免body的click事件被触发了，所以有
<div id="divId" onclick="trywindow.event.cancelBubble = true;catch(e)event.stopPropagation();"><div>
有用望采纳本回答被提问者和网友采纳 参考技术B 最简单的方法：<div onblur="javascript:this.style.display='none';">asdasdasdasd</div> 参考技术C 可以参考下面的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>外部点击关闭div的方法</title>
<style type="text/css">
body background:black;
#myDiv background: #fff; width:250px; height:250px; display:none;
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="myDiv"> This is a div; </div>
<input id="btn" type="button" value="显示DIV" />
<script type="text/javascript">
$(document).ready(function()
var myDiv = $("#myDiv");
$(function ()
$("#btn").click(function (event)
showDiv();//调用显示DIV方法
$(document).one("click", function ()
//对document绑定一个影藏Div方法
$(myDiv).slideUp();
);
event.stopPropagation();//阻止事件向上冒泡
);
$(myDiv).click(function (event)
event.stopPropagation();//阻止事件向上冒泡
);
);
function showDiv()
$(myDiv).slideDown();
);
</script>
</body>
</html>
你需要配合jquery库来配合上面方法。
如果不想依赖jquery，可以用下面的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>点击其它地方关闭DIV</title>
</head>
<body>
<input type="text" value="" id="tf"/>
<div style="width:400px; height:200px;border:1px solid #000;display:none" id="con">
<p>1111</p>
<p><span>2222</span></p>
<p><a href="#">3333</a></p>
</div>
<script>
function e(obj)
return document.getElementById(obj)
e('tf').onclick=function(event)
e('con').style.display='block';
stopBubble(event);
document.onclick=function()
e('con').style.display='none';
document.onclick=null;
e('con').onclick=function(event)
//只阻止了向上冒泡，而没有阻止向下捕获，所以点击con的内部对象时，仍然可以执行这个函数
stopBubble(event); //阻止冒泡函数
function stopBubble(e)
if(e && e.stopPropagation)
e.stopPropagation(); //w3c
else
window.event.cancelBubble=true; //IE
</script>
</body>
</html> 参考技术D <div id="hdiv">123123<div>
<script type="text/javascript">
jQuery("body").click(function()
jQuery("#hdiv").hide();
);
jQuery("#hdiv").click(function()
jQuery("#hdiv").show();
);
</script>
记得导入JQuery包
以上是关于js隐藏div的主要内容，如果未能解决你的问题，请参考以下文章