87,992
社区成员
发帖
与我相关
我的任务
分享在面板外点击关闭面板
功能要求：
在面板外点击关闭面板
比如现在有个打开的DIV，只要在DIV外点击，DIV就关闭，即消失。
求各位大大指教！
在面板外点击关闭面板
比如现在有个打开的DIV，只要在DIV外点击，DIV就关闭，即消失。
求各位大大指教！
...全文
请发表友善的回复…
发表回复
泡泡鱼_ 2012-09-21
- 打赏
- 举报
<script type="text/javascript">
Array.prototype.inArray=function (value){for (var i=0;i<this.length;i++){if (this[i] == value){return true;}}return false};
function handler(e){
e=window.event||e;
var tag=e.srcElement||e.target;
var tagArr=["testdiv","testdiv2"];//还有哪个面板想要控制的就加到这个数组里面来
var tagNodeArr=["input","a"];//定义不受此事件影响的标签[小写形式]
for(i=0;i<tagArr.length;i++){
if(tag.id!=tagArr[i] && !tagNodeArr.inArray(tag.nodeName.toLowerCase())){
document.getElementById(tagArr[i]).style.display='none';
}
}
}
function showdiv(id){
document.getElementById(id).style.display='block';
}
window.onload=function(){
document.onclick=handler;
}
</script>
<div id="testdiv" style="width:200px;height:200px;border:1px solid #bfbfbf">我是层1</div>
<div id="testdiv2" style="width:200px;height:200px;border:1px solid #bfbfbf">我是层2</div>
<input type="button" value="层1显示" onclick="showdiv('testdiv')" />
<input type="button" value="层2显示" onclick="showdiv('testdiv2')" />
<a href="javascript:void(0);" onclick="showdiv('testdiv')">层1显示</a>
<a href="javascript:void(0);" onclick="showdiv('testdiv2')">层2显示</a>
liuf_fenfangjiemei 2012-09-21
- 打赏
- 举报
如果有好几个面板，都需要这样的功能，如何实现？
liuf_fenfangjiemei 2012-09-21
- 打赏
- 举报
谢谢楼上各位大大们！o(∩_∩)o
那如果DIV是需要通过某个按钮弹出，又可以在DIV外点击关闭呢？
按钮不在DIV内
那如果DIV是需要通过某个按钮弹出，又可以在DIV外点击关闭呢？
按钮不在DIV内
泡泡鱼_ 2012-09-21
- 打赏
- 举报
你可真有意思。半天半天丢个jquery出来
<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击其它地方关闭层的问题</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
*{font-size:12px;margin:0px;padding:0;}
body{margin:10px;}
#divObj{position: absolute; width:400px; height:200px; background:#FDF5E6;border: 1px solid #FACE9C; display:none; z-index:9999;}
table{width:100%;border-collapse:collapse;}
th,td{text-align:center;line-height:24px;width:33%;}
#sub_div{width:80px;display:none;z-index:9999;position: absolute;background:#FFFFFF;border: 1px solid #426EB4}
</style>
<script type="text/javascript">
$(function () {
//绑定事件处理
$("#choice_list_district").click(function (e) {
if ($("#divObj").css("display") == "none") {
e.stopPropagation();
//设置弹出层位置
var offset = $(e.target).offset();
//设置弹出层位置在点击的下面
$("#divObj").css({ top: offset.top + $(e.target).height() + "px", left: offset.left });
$("#divObj").show();
}
//单击其它地方隐藏弹出层
$(document).click(function (event) {
event.stopPropagation();
var tag=event.srcElement||event.target;
var tagid=$(tag).closest("div").attr("id");
if(typeof(tagid)=="undefined"){
$("#divObj").hide();
$("#sub_div").hide();
}else{
if(tagid.toLowerCase()=="divobj" && !$("#sub_div").is(":hidden")){
$("#sub_div").hide();
}
}
});
});
});
/*显示子层*/
function openSubDiv(obj)
{
if($("#sub_div").is(":hidden")){
var offset = $('#'+obj.id).offset();
$("#sub_div").css({ top: offset.top + $('#'+obj.id).height() + "px", left: offset.left });
setTimeout(function(){$("#sub_div").show()});
}else{
setTimeout(function(){$("#sub_div").show()});
}
}
</script>
</head>
<body>
<div>
<div><a id="choice_list_district" href="#">出来层</a></div>
<div id="divObj">
<table>
<thead>
<tr><th>编号</th><th>内容</th><th>操作</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>AAAAAA</td><td><a href="#" id="aa" onclick="openSubDiv(this)">单击有惊喜哦</a></td></tr>
<tr><td>2</td><td>BBBBBB</td><td><a href="#" id="bb" onclick="openSubDiv(this)">单击有惊喜哦</a></td></tr>
<tr><td>3</td><td>CCCCCC</td><td><a href="#" id="cc" onclick="openSubDiv(this)">单击有惊喜哦</a></td></tr>
</tbody>
</table>
</div>
<div id="sub_div">
<table>
<tr><td><input type="radio" name="inputradio" value="AA"></input></td><td>AA</td></tr>
<tr><td><input type="radio" name="inputradio" value="BB"></input></td><td>BB</td></tr>
<tr><td><input type="radio" name="inputradio" value="CC"></input></td><td>CC</td></tr>
</table>
</div>
</div>
</body>
</html> 
a8509190 2012-09-21
- 打赏
- 举报
思路不难，就是你用个大的DIV 包住你要关闭的DIV 当你点击小的DIV外面时候会调用大的DIV的单击事件，去判断小的DIV是否是显示的，如果是显示的就关闭它！
斯洛文尼亚旅游 2012-09-21
- 打赏
- 举报
帮你改了下结构，第二个弹出层放到总容器中
<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击其它地方关闭层的问题</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
*{font-size:12px;margin:0px;padding:0;}
body{margin:10px;}
#divObj{position: absolute; width:400px; height:200px; background:#FDF5E6;border: 1px solid #FACE9C; display:none; z-index:9999;}
table{width:100%;border-collapse:collapse;}
th,td{text-align:center;line-height:24px;width:33%;}
#sub_div{width:80px;display:none;z-index:9999;position: absolute;background:#FFFFFF;border: 1px solid #426EB4}
</style>
<script type="text/javascript">
//扩展非IE浏览器下的contains方法
if (window.Element) Element.prototype.contains = function (o) { if (this == o) return true; while (o = o.parentNode) if (o == this) return true; return false; }
function contains(pId, o) {
}
var popID = 'divObj'; ///////面板总容器ID
document.onclick = function (e) {
e = e || window.event;
var o = e.srcElement || e.target;
if (!document.getElementById(popID).contains(o)) //如果点击的对象不包含在面板中则隐藏
document.getElementById(popID).style.display = 'none';
}
$(function () {
//绑定事件处理
$("#choice_list_district").click(function (e) {
if ($("#divObj").css("display") == "none") {
e.stopPropagation();
//设置弹出层位置
var offset = $(e.target).offset();
//设置弹出层位置在点击的下面
$("#divObj").css({ top: offset.top + $(e.target).height() + "px", left: offset.left });
$("#divObj").show();
}
//单击其它地方隐藏弹出层
// $(document).click(function (event) { $("#divObj,#sub_div").hide(); });
//单击本身不隐藏
//$("#divObj").click(function () { return false; });
});
});
/*显示子层*/
function openSubDiv(obj) {
if ($("#sub_div").css('display') == 'none') {
var offset = $('#' + obj.id).position();//////
$("#sub_div").css({ top: offset.top + $('#' + obj.id).height() + "px", left: offset.left });
$("#sub_div").css('display', 'block');
} else {
$("#sub_div").css('display', 'none');
}
}
</script>
</head>
<body>
<div>
<div><a id="choice_list_district" href="#">出来层</a></div>
<div id="divObj">
<table>
<thead>
<tr><th>编号</th><th>内容</th><th>操作</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>AAAAAA</td><td><a href="#" id="aa" onclick="openSubDiv(this)">单击有惊喜哦</a></td></tr>
<tr><td>2</td><td>BBBBBB</td><td><a href="#" id="bb" onclick="openSubDiv(this)">单击有惊喜哦</a></td></tr>
<tr><td>3</td><td>CCCCCC</td><td><a href="#" id="cc" onclick="openSubDiv(this)">单击有惊喜哦</a></td></tr>
</tbody>
</table>
<div id="sub_div">
<table>
<tr><td><input type="radio" name="inputradio" value="AA"></input></td><td>AA</td></tr>
<tr><td><input type="radio" name="inputradio" value="BB"></input></td><td>BB</td></tr>
<tr><td><input type="radio" name="inputradio" value="CC"></input></td><td>CC</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>liuf_fenfangjiemei 2012-09-21
- 打赏
- 举报
<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击其它地方关闭层的问题</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
*{font-size:12px;margin:0px;padding:0;}
body{margin:10px;}
#divObj{position: absolute; width:400px; height:200px; background:#FDF5E6;border: 1px solid #FACE9C; display:none; z-index:9999;}
table{width:100%;border-collapse:collapse;}
th,td{text-align:center;line-height:24px;width:33%;}
#sub_div{width:80px;display:none;z-index:9999;position: absolute;background:#FFFFFF;border: 1px solid #426EB4}
</style>
<script type="text/javascript">
$(function () {
//绑定事件处理
$("#choice_list_district").click(function (e) {
if ($("#divObj").css("display") == "none") {
e.stopPropagation();
//设置弹出层位置
var offset = $(e.target).offset();
//设置弹出层位置在点击的下面
$("#divObj").css({ top: offset.top + $(e.target).height() + "px", left: offset.left });
$("#divObj").show();
}
//单击其它地方隐藏弹出层
$(document).click(function (event) { $("#divObj").hide(); });
//单击本身不隐藏
$("#divObj").click(function(){return false; });
});
});
/*显示子层*/
function openSubDiv(obj)
{
if($("#sub_div").css('display')=='none'){
var offset = $('#'+obj.id).offset();
$("#sub_div").css({ top: offset.top + $('#'+obj.id).height() + "px", left: offset.left });
$("#sub_div").css('display','block');
}else{
$("#sub_div").css('display','none');
}
}
</script>
</head>
<body>
<div>
<div><a id="choice_list_district" href="#">出来层</a></div>
<div id="divObj">
<table>
<thead>
<tr><th>编号</th><th>内容</th><th>操作</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>AAAAAA</td><td><a href="#" id="aa" onclick="openSubDiv(this)">单击有惊喜哦</a></td></tr>
<tr><td>2</td><td>BBBBBB</td><td><a href="#" id="bb" onclick="openSubDiv(this)">单击有惊喜哦</a></td></tr>
<tr><td>3</td><td>CCCCCC</td><td><a href="#" id="cc" onclick="openSubDiv(this)">单击有惊喜哦</a></td></tr>
</tbody>
</table>
</div>
<div id="sub_div">
<table>
<tr><td><input type="radio" name="inputradio" value="AA"></input></td><td>AA</td></tr>
<tr><td><input type="radio" name="inputradio" value="BB"></input></td><td>BB</td></tr>
<tr><td><input type="radio" name="inputradio" value="CC"></input></td><td>CC</td></tr>
</table>
</div>
</div>
</body>
</html> 斯洛文尼亚旅游 2012-09-21
- 打赏
- 举报
判断下鼠标点击的对象是否在面板中就好，不再就隐藏
//扩展非IE浏览器下的contains方法
if (window.Element) Element.prototype.contains = function (o) { if (this == o) return true; while (o = o.parentNode) if (o == this) return true; return false; }
var popID = 'xxxx';///////面板总容器ID
document.onclick = function (e) {
e = e || window.event;
var o = e.srcElement || o.target;
if (!document.getElementById(popID).contains(o)) //如果点击的对象不包含在面板中则隐藏
document.getElementById(popID).style.display = 'none';
}泡泡鱼_ 2012-09-21
- 打赏
- 举报
你这明显是走了弯路了。给你整了个。你要是再接着发问，就自己找答案去了
<script type="text/javascript">
Array.prototype.inArray=function (value){for (var i=0;i<this.length;i++){if (this[i] == value){return true;}}return false};
function getparent(o,arr){
var b=o.parentNode;
if(b.nodeName.toLowerCase()!="body"){
arr.push(b.id);
getparent(b,arr);
}
return arr;
}
function handler(e){
e=window.event||e;
var tag=e.srcElement||e.target;
var tagArr=["testdiv","testdiv2","testdiv3","testdiv4"];//还有哪个面板想要控制的就加到这个数组里面来
var tagNodeArr=["input","a"];//定义不受此事件影响的标签[小写形式]
var parentArr=new Array();
if(tag.id.length>0){
parentArr=getparent(document.getElementById(tag.id),parentArr);
}
for(i=0;i<tagArr.length;i++){
if(tag.id!=tagArr[i] && !tagNodeArr.inArray(tag.nodeName.toLowerCase()) && !parentArr.inArray(tagArr[i].toLowerCase())){
document.getElementById(tagArr[i]).style.display='none';
}
}
}
function showdiv(id){
document.getElementById(id).style.display='block';
}
window.onload=function(){
document.onclick=handler;
}
</script>
<div id="testdiv" class="tcform" style="width:200px;height:200px;border:1px solid #bfbfbf; vertical-align:baseline;">
我是层1
<div id="testdiv3" class="tcform" style="width:100px;height:100px;border:1px solid #bfbfbf; vertical-align:baseline;">我是层3[在层1内]
<div id="testdiv4" class="tcform" style="width:100px;height:100px;border:1px solid #bfbfbf; vertical-align:baseline;">我是层4[在层3内]</div>
</div>
</div>
<div id="testdiv2" class="tcform" style="width:200px;height:200px;border:1px solid #bfbfbf; vertical-align:baseline;">我是层2</div>
<input type="button" value="层1显示" onclick="showdiv('testdiv')" />
<input type="button" value="层2显示" onclick="showdiv('testdiv2')" />
<input type="button" value="层3显示" onclick="showdiv('testdiv3')" />
<input type="button" value="层4显示" onclick="showdiv('testdiv4')" />
<a href="javascript:void(0);" onclick="showdiv('testdiv')">层1显示</a>
<a href="javascript:void(0);" onclick="showdiv('testdiv2')">层2显示</a>
<a href="javascript:void(0);" onclick="showdiv('testdiv3')">层3显示</a>
<a href="javascript:void(0);" onclick="showdiv('testdiv4')">层4显示</a>liuf_fenfangjiemei 2012-09-21
- 打赏
- 举报
可是，如果一个面板上，有不定数的小面板，怎么办？
road_16 2012-09-20
- 打赏
- 举报
我试了一楼的代码，在层的右外侧点击，可以让层隐藏，但是在层的下方点击，没反应,使用谷哥和火狐浏览器进行的测试[Quote=引用 1 楼 的回复:]
HTML code
<script type="text/javascript">
function handle(e){
e=window.event||e;
var tag=e.srcElement||e.target;
if(tag.id!='testdiv'){
document.getElementById("testdiv").style.d……
[/Quote]
HTML code
<script type="text/javascript">
function handle(e){
e=window.event||e;
var tag=e.srcElement||e.target;
if(tag.id!='testdiv'){
document.getElementById("testdiv").style.d……
[/Quote]
泡泡鱼_ 2012-09-20
- 打赏
- 举报
[Quote=引用 2 楼 的回复:]
引用 1 楼 的回复:
HTML code
<script type="text/javascript">
function handle(e){
e=window.event||e;
var tag=e.srcElement||e.target;
if(tag.id!='testdiv'){
document.getElementById("testdiv").style.d………
[/Quote]
嗯，确实是。改成document.onclick也可以
引用 1 楼 的回复:
HTML code
<script type="text/javascript">
function handle(e){
e=window.event||e;
var tag=e.srcElement||e.target;
if(tag.id!='testdiv'){
document.getElementById("testdiv").style.d………
[/Quote]
嗯，确实是。改成document.onclick也可以
天使小宝 2012-09-20
- 打赏
- 举报
在1楼的基础上，改成jQuery代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(window).click(function(e){
e = window.event || e;
var tag = e.srcElement || e.target;
if(tag.id != 'testdiv'){
$("#testdiv").hide();
}
})
</script>
<style>
html{
cursor: pointer;
}
#testdiv{
cursor: default;
}
</style>
</head>
<body>
<div id="testdiv" style="width:600px;height:300px;border:1px solid #bfbfbf"></div>
</body>
</html>
天使小宝 2012-09-20
- 打赏
- 举报
[Quote=引用 1 楼 的回复:]
HTML code
<script type="text/javascript">
function handle(e){
e=window.event||e;
var tag=e.srcElement||e.target;
if(tag.id!='testdiv'){
document.getElementById("testdiv").style.d……
[/Quote]
我试了下document.body.onclick=handle;在IE下DIV以下的区域点击都隐藏不了，换成window.onclick=handle;这句就可以了。
HTML code
<script type="text/javascript">
function handle(e){
e=window.event||e;
var tag=e.srcElement||e.target;
if(tag.id!='testdiv'){
document.getElementById("testdiv").style.d……
[/Quote]
我试了下document.body.onclick=handle;在IE下DIV以下的区域点击都隐藏不了，换成window.onclick=handle;这句就可以了。
泡泡鱼_ 2012-09-20
- 打赏
- 举报
<script type="text/javascript">
function handle(e){
e=window.event||e;
var tag=e.srcElement||e.target;
if(tag.id!='testdiv'){
document.getElementById("testdiv").style.display='none';
}
}
window.onload=function(){
document.body.onclick=handle;
}
</script>
<div id="testdiv" style="width:600px;height:300px;border:1px solid #bfbfbf"></div>
