点击空白地方只能实现一个DIV隐藏第二个DIV就不能隐藏了怎么才能实现两个div都隐藏

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{ width:200px;}
#div1 span{ width:200px; height:30px; float:left; background:#099; text-align:center; line-height:30px; cursor:pointer;}
#div1 li{width:200px; height:30px; float:left; background:#069; border:1px solid #DCDCDC; list-style:none; line-height:30px;float:left;}
#div2{ width:200px; float:left; display:inline; margin-left:30px;}
#div2 span{ width:200px; height:30px; float:left; background:#960; text-align:center; line-height:30px; cursor:pointer;}
#div2 li{width:200px; height:30px; float:left; background:#069; border:1px solid #DCDCDC; list-style:none; line-height:30px;float:left;}
</style>
<script>
window.onload=function()
{
div1();
div2();
}
</script>
</head><body>
<div id="div1">
  <span>播放列表</span>
  <ul style="display:none;">
   <li>1111111111</li>
   <li>2222222222</li>
   <li>1111111111</li>
   <li>2222222222</li>
  </ul>
</div>
<div id="div2">
  <span>播放列表</span>
  <ul style="display:none;">
   <li>1111111111</li>
   <li>2222222222</li>
   <li>1111111111</li>
   <li>2222222222</li>
  </ul>
</div>
<script>
function div1()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var oSpan=oDiv.getElementsByTagName('span')[0];

oSpan.onclick=function(ev)
{
    var oEvent=ev||event;
if(oUl.style.display=='none')
{
oUl.style.display='block';
}
else
{
oUl.style.display='none';
}
oEvent.cancelBubble=true;
}
document.onclick=function()
{
oUl.style.display='none';
}
}
function div2(){
    var oDiv1=document.getElementById('div2');
var oUl1=oDiv1.getElementsByTagName('ul')[0];
var oSpan1=oDiv1.getElementsByTagName('span')[0];

oSpan1.onclick=function(ev)
{
    var oEvent=ev||event;
if(oUl1.style.display=='none')
{
oUl1.style.display='block';
}
else
{
oUl1.style.display='none';
}
oEvent.cancelBubble=true;
}
document.onclick=function()
{
oUl1.style.display='none';
}
}
</script>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{ width:200px;}
#div1 span{ width:200px; height:30px; float:left; background:#099; text-align:center; line-height:30px; cursor:pointer;}
#div1 li{width:200px; height:30px; float:left; background:#069; border:1px solid #DCDCDC; list-style:none; line-height:30px;float:left;}
#div2{ width:200px; float:left; display:inline; margin-left:30px;}
#div2 span{ width:200px; height:30px; float:left; background:#960; text-align:center; line-height:30px; cursor:pointer;}
#div2 li{width:200px; height:30px; float:left; background:#069; border:1px solid #DCDCDC; list-style:none; line-height:30px;float:left;}
</style>
<script>
window.onload=function()
{
div1();
div2();
}
</script>
</head><body>
<div id="div1">
  <span>播放列表</span>
  <ul style="display:none;" name="listUl" >
   <li>1111111111</li>
   <li>2222222222</li>
   <li>1111111111</li>
   <li>2222222222</li>
  </ul>
</div>
<div id="div2">
  <span>播放列表</span>
  <ul style="display:none;" name="listUl" >
   <li>1111111111</li>
   <li>2222222222</li>
   <li>1111111111</li>
   <li>2222222222</li>
  </ul>
</div>
<script>
function div1()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var oSpan=oDiv.getElementsByTagName('span')[0];

oSpan.onclick=function(ev)
{
    var oEvent=ev||event;
if(oUl.style.display=='none')
{
oUl.style.display='block';
}
else
{
oUl.style.display='none';
}
oEvent.cancelBubble=true;
}

}
function div2(){
    var oDiv1=document.getElementById('div2');
var oUl1=oDiv1.getElementsByTagName('ul')[0];
var oSpan1=oDiv1.getElementsByTagName('span')[0];

oSpan1.onclick=function(ev)
{
    var oEvent=ev||event;
if(oUl1.style.display=='none')
{
oUl1.style.display='block';
}
else
{
oUl1.style.display='none';
}
oEvent.cancelBubble=true;
}}var uls=document.getElementsByName('listUl')
document.onclick=function()
{
for(var i=0;i<uls.length;i++)  uls[i].style.display='none';
}
</script>
</body>
</html>
var uls=document.getElementsByName('listUl')
document.onclick=function()
{
for(var i=0;i<uls.length;i++)  uls[i].style.display='none';
}
在ie下没有效果啊

点击空白地方 只能实现一个DIV隐藏 第二个DIV就不能隐藏了 怎么才能实现两个div都隐藏

解决方案 »

点击空白地方只能实现一个DIV隐藏第二个DIV就不能隐藏了怎么才能实现两个div都隐藏