js实现点击显示一个div,点击其他任何地方div消失,如何实现
如题希望哪位大侠给出解决方案，小弟感激不敬！已经实现了点击显示，但是无法实现点击其它地方消失！...
如题希望哪位大侠给出解决方案，小弟感激不敬！已经实现了点击显示，但是无法实现点击其它地方消失！
展开
2个回答
展开全部
知道文本框都有blur事件吗？就是光标在闪的时候就处于焦点，当你点其他地方时，光标就没了，就会触发blur事件。你要做到当div显示时，让隐藏在div内的文本框处于焦点，点击其他地方时，文本框的焦点自然会消失，blur事件把当前div隐藏。
!!注意: 当点击显示的div时要用脚本处理div中的隐藏文本框处于焦点
可以用jquery 脚本框架，方便，浏览器的兼容性好
!!注意: 当点击显示的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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
nav{margin:0 auto;height:30px;width:80%;min-width:900px;background-color:#000;}
nav ul{list-style:none;width:500px;margin:0 auto;}
nav ul li{position:relative;float:left;width:100px;line-height:30px;height:30px;color:#fff;font-weight:700;text-align:center;}
nav ul li div{position: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>
nav{margin:0 auto;height:30px;width:80%;min-width:900px;background-color:#000;}
nav ul{list-style:none;width:500px;margin:0 auto;}
nav ul li{position:relative;float:left;width:100px;line-height:30px;height:30px;color:#fff;font-weight:700;text-align:center;}
nav ul li div{position: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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
