我想要点击一个DIV之外的任何地方,都能隐藏这个DIV要怎么弄?
$(".left").toggle();
$(".bus_select").hide();
});
点击bus_select之后 left出现 bus_select隐藏 我想要点击left之外的任何地方 让left隐藏 bus_select出现
要怎么弄个?麻烦写一下,菜鸟不是很懂 展开
1、首先输入代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#pop {
border: #000;
background-color: #CCC;
position: absolute;
left: 50px;
top: 50px;
width: 200px;
2、然后输入代码:
height: 500px;
display: none;
}
#btn {
color: #f00;
}
</style>
</head>
<body>
<span id="btn">打开层</span>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
3、然后输入:
<div id="pop">
浮层,点击这个浮层以外的区域,都可以隐藏这个浮层
<p><a href="javascript:;">最主要的是点这个div里面的链接,div照样不隐藏</a></p>
</div>
</body>
</html>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
window.onload = function () {
document.onclick = function (e) {
$("pop").style.display = "none";
}
$("btn").onclick = function (e) {
4、最后输入:
$("pop").style.display = "block";
e = e || event; stopFunc(e);
}
$("pop").onclick = function (e) {
e = e || event; stopFunc(e);
}
}
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
</script>
// 点击任何地方 让left隐藏 bus_select出现
$(document).click(function(){ $('.left').hide(); $('.bus_select').show(); });
// 点击left 阻拦(让left隐藏 bus_select出现)(stopPropagation阻拦click事件冒泡) 及实现了 点击left之外的任何地方 让left隐藏 bus_select出现
$('.left').click(function(event){ event.stopPropagation(); });
// 点击bus_select之后 left出现 bus_select隐藏
$('.bus_select').click(function(event){ $('.bus_select').hide(); $('.left').show(); });
这个不行啊 大神,我先要点击bus_select 让left出现 然后bus_select隐藏了 ,之后点其他地方left隐藏
bus_select出现
大神发的这个 我点都点不开了。。
我疏忽了 最后一个改成这样
$('.bus_select').click(function(event){
$('.bus_select').hide();
$('.left').show();
event.stopPropagation();
});
$(".left").toggle();
$("body").click(function(e){
if(!$(e.target).parents(".left").length){
$(".left").hide()
}
});
这个不行啊 用了之后根本打不开left了
好吧。是我的错,我写完整吧:
//这是你的代码
$(".bus_select").click(function () {
$(".left").toggle();
$(".bus_select").hide();
});
//这是我加的代码
$("body").click(function (e) {
if (!$(e.target).closest(".left").length) {
$(".left").hide()
}
});
我没有测试过,我讲讲我的原理吧,也许你懂了原理就能自己改了。
你要的是在点 .left 以外的地方能隐藏它,那么在外面点,其实都相当于是在 body 上面点(有元素的 click 返回 false 的例外,会让 body 的 click 收不到),那么我们只要在 body 上绑定 click 就可以了,但是呢,我们在 .left 上点也会上传到 body 的 click,这时,我们要判断 我们点的元素是在 .left 里的还是 .left 外。e.target 代表我们点击的元素。 closest 方法是判断 e.target 本身和父辈元素中,有没有 .left 元素,也就是判断我们是不是在 .left 内点击了。
能写详细点吗