JS点击后弹出Div问题---在线等

这段js点击2个按钮后都可弹出Div层，要实现点击第二个按钮弹出Div后并将第一个按钮弹出的div关闭。怎么改？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#box,#box2,#box3,#box4{padding:10px;border:1px solid green;} 
</style>
<script type="text/javascript">
//===========================点击展开关闭效果====================================
function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
var openTip = oOpenTip || "";
var shutTip = oShutTip || "";
if(targetObj.style.display!="none"){
   if(shutAble) return;
   targetObj.style.display="none";
   if(openTip && shutTip){
    sourceObj.innerHTML = shutTip; 
   }
} else {
   targetObj.style.display="block";
   if(openTip && shutTip){
    sourceObj.innerHTML = openTip; 
   }
}
}
</script>
<title>无标题文档</title>
</head>
<body>
<p><a href="###" onclick="openShutManager(this,'box')">点击展开</a></p>
<p id="box" style="display:none">
   这里面放的是box的内容.
</p>
<p><a href="###" onclick="openShutManager(this,'box3',false,'点击关闭','点击展开')">点击展开</a></p>
<p id="box3" style="display:none">
   这里面放的是box的内容.
</p>
</body>
</html>

解决方案 »

  1.   

    再加一个参数，传递要关闭的DIV，试试
      

  2.   

    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
    #box,#box2,#box3,#box4{padding:10px;border:1px solid green;} 
    </style> 
    <script type="text/javascript"> 
    //===========================点击展开关闭效果==================================== 
    function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){ 
    var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj; 
    var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj; 
    var openTip = oOpenTip || ""; 
    var shutTip = oShutTip || ""; 
    if(targetObj.style.display!="none"){ 
      if(shutAble) {return;} 
      targetObj.style.display="none"; 
      if(openTip && shutTip){ 
        sourceObj.innerHTML = shutTip; 
      } 
    } else { 
    if(shutAble) {return;} else {document.getElementById('box').style.display='none';} 
      targetObj.style.display="block"; 
      if(openTip && shutTip){ 
        sourceObj.innerHTML = openTip; 
      } 
    } 
    } 
    </script> 
    <title>无标题文档 </title> 
    </head> 
    <body> 
    <p> <a href="###" onclick="openShutManager(this,'box')">点击展开 </a> </p> 
    <p id="box" style="display:none"> 
      这里面放的是box的内容. 
    </p> 
    <p> <a href="###" onclick="openShutManager(this,'box3',false,'点击关闭','点击展开')">点击展开 </a> </p> 
    <p id="box3" style="display:none"> 
      这里面放的是box的内容. 
    </p> 
    </body> 
    </html>
      

  3.   

    昨天刚帮一个写一个，参考...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css"> 
    body,td,div,input,fieldset,legend{font-family:Verdana; font-size:12px; color:#333333; font-weight:normal;}
    td{line-height:20px;}
    a:link,a:visited{font-family:Verdana; font-size:12px; color:#330099; font-weight:normal; text-decoration:none;}
    a:hover,a:active{font-family:Verdana; font-size:12px; color:#FF6600; font-weight:normal; }
    span{font-family:Verdana; font-size:12px; color:red; font-weight:normal; display:block; margin:0px 10px;}
    </style>
    </head>
    <script type="text/javascript">
    var playID; function $(id){
    return "string"==typeof(id) ? document.getElementById(id) : id ; 
    }function openDiv(divID){
    var oID=divID;
    if(oID=="") return;
    var o=$(oID);
    var maxw=300;
    var maxh=300;
    var step=5;
    o.style.position="absolute";
    o.style.overFlow="hidden";
    o.style.border="1px solid red";
    o.style.display="block";
    o.style.padding="5px";
    o.style.zIndex=9999;
    var posl=parseInt(o.style.left,10);
    if(posl>screen.width/2-maxw/2) o.style.left=(posl-step)+"px";
    var w=parseInt(o.style.width,10);
    if(w<maxw) o.style.width=(w+step*2)+"px";
    var post=parseInt(o.style.top,10);
    if(post>screen.height/2-maxh/2) o.style.top=(post-step)+"px";
    var h=parseInt(o.style.height,10);
    if(h<maxh) o.style.height=(h+step*2)+"px";
    o.outerHTML=o.outerHTML+"";
    if(w>=maxw && h>=maxh) clearInterval(playID);
    }function closeDiv(divID){
    var oID=divID;
    if(oID=="") return;
    var o=$(oID);
    var minw=1;
    var minh=1;
    var step=5;
    var posl=parseInt(o.style.left,10);
    if(posl<screen.width/2) o.style.left=(posl+step)+"px";
    var w=parseInt(o.style.width,10);
    if(w>minw) o.style.width=(w-step*2)+"px";
    var post=parseInt(o.style.top,10);
    if(post<screen.height/2) o.style.top=(post+step)+"px";
    var h=parseInt(o.style.height,10);
    if(h>minh) o.style.height=(h-step*2)+"px";
    o.outerHTML=o.outerHTML+"";
    if(h<=minh && w<=minw){
    $(oID).style.display="none";
    clearInterval(playID);}
    }function playOpen(){
    try{
    clearInterval(playID);
    }catch(e){"something error:"+e.toString();}
    playID=setInterval("openDiv('popwindow')",10);
    }function playClose(){
    try{
    clearInterval(playID);
    }catch(e){alert("something error:"+e.toString());}
    playID=setInterval("closeDiv('popwindow')",10);
    }function init(){
    var o=$("popwindow");
    o.style.left=(screen.width/2)+"px";
    o.style.top=(screen.height/2)+"px";
    }window.onload=function(){
    init();
    setTimeout("playOpen()",1000);
    setTimeout("playClose()",4000);
    }
    </script>
    <body>
    <div id="popwindow" style="display:none; width:1px; height:1px;">
    <div id="btndiv01" style="text-align:right;"><span style="cursor:pointer; width:60px;" onclick="javascript:playClose();">close</span></div>
    <img src="http://avatar.profile.csdn.net/D/3/4/2_chjx1982.jpg"><br />
    pop Box content<br/>
    pop Box content <br /><br />
    <img src="http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/56.gif">
    <img src="http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/13.gif"><br>
    <img src="http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg">
    </div>
    <input name="btn01" type="button" value="open Box" onclick="javascript:playOpen();" />
    <input name="btn02" type="button" value="close Box" onclick="javascript:playClose();" />
    <input name="btn03" type="button" value="open step" onclick="javascript:openDiv('popwindow');" />
    <input name="btn04" type="button" value="close step" onclick="javascript:closeDiv('popwindow');" />
    <p>
    在屏幕中间逐渐弹出/关闭窗口<br />
    created: 2009-12-17
    </p><p>参考: <a href="http://topic.csdn.net/u/20091217/09/a0d5b4f4-760d-4846-a53c-71ef71218154.html" target="_blank">http://topic.csdn.net/u/20091217/09/a0d5b4f4-760d-4846-a53c-71ef71218154.html</a></p>
    </body>
    </html>
      

  4.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #box,#box2,#box3,#box4{padding:10px;border:1px solid green;}
    </style>
    <script type="text/javascript">
    function openShutManager(e,id){
    var s = document.getElementById(id);
    id=='box'? (document.getElementById('box3').style.display='none'):(document.getElementById('box').style.display='none');
    s.style.display=='none'? s.style.display='block':s.style.display='none';
    }
    </script>
    <title>无标题文档 </title>
    </head>
    <body>
    <p> <a href="###" onclick="openShutManager(this,'box')">点击展开 </a> </p>
    <p id="box" style="display:none">
      这里面放的是box的内容.
    </p>
    <p> <a href="###" onclick="openShutManager(this,'box3',false,'点击关闭','点击展开')">点击展开 </a> </p>
    <p id="box3" style="display:none">
      这里面放的是box的内容.
    </p>
    </body>
    </html>