js实现点击显示一个div,点击其他任何地方div消失,如何实现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现点击显示一个div,点击其他任何地方div消失,如何实现相关的知识，希望对你有一定的参考价值。
如题希望哪位大侠给出解决方案，小弟感激不敬！已经实现了点击显示，但是无法实现点击其它地方消失！
知道文本框都有blur事件吗？就是光标在闪的时候就处于焦点，当你点其他地方时，光标就没了，就会触发blur事件。你要做到当div显示时，让隐藏在div内的文本框处于焦点，点击其他地方时，文本框的焦点自然会消失，blur事件把当前div隐藏。!!注意: 当点击显示的div时要用脚本处理div中的隐藏文本框处于焦点
可以用jquery 脚本框架，方便，浏览器的兼容性好追问
我用的a标签，那该用什么触发呢？我试了那个blur，不行的。
追答<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>测试</title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function ()
$("#hidePanel1").click(function ()
$(this).show();
$(this).focus();
);
$("#hidePanel1").blur(function ()
$(this).hide();
);
$("#hidePanel1").hide();
);
</script>
</head>
<body>
<h1 onclick='$("#hidePanel1").hide()'>点我div隐藏</h1>
<h1 onclick='$("#hidePanel1").click()'>点我div显示</h1>
<a href="javascript:void(0)" class="showPanel" id="hidePanel1" style="border:2px solid; color:#333; text-decoration:none; height:150px;display:block;">
点我div还会显示，点其他地方div隐藏
<h1>点我div还会显示</h1>
</a>
</body>
</html> 参考技术A <style>
navmargin:0 auto;height:30px;width:80%;min-width:900px;background-color:#000;
nav ullist-style:none;width:500px;margin:0 auto;
nav ul liposition:relative;float:left;width:100px;line-height:30px;height:30px;color:#fff;font-weight:700;text-align:center;
nav ul li divposition:absolute;left:0;top:30px;width:200px;height:200px;background:#000;display:none;
</style>
<body>
<nav>
<ul>
<li id="test">首页
<div>我这里有个裙，每天都有免丨费的直播课，想要学习的可以家一下，前面是二九，中间是六五九，后面是一二90。连起来就可以了。</div>
</li>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
</nav>
<script>
var test = document.getElementById("test");
var div = test.getElements丨byTagName("div")[0];
test.onclick = f丨unction(e)
e = e || event;
e.cancelBubble = true;
div.style.display = "block";
document.onclick = f丨unction()
div.style.display = "none";
</script>
</body>
js怎么实现点击div区域外任意位置，使这个div隐藏？
用的jquery,本身这个div是点击另一个按钮用的toggle(),来显示和隐藏的，现在我想让鼠标点击div区域外任意地方都把这个div隐藏，请问怎么实现好呢？谢啦
以上是关于js实现点击显示一个div,点击其他任何地方div消失,如何实现的主要内容，如果未能解决你的问题，请参考以下文章