点击空白地方 只能实现一个DIV隐藏 第二个DIV就不能隐藏了 如何才能实现两个div都隐藏
日期：2014-05-16 浏览次数：20381 次
点击空白地方 只能实现一个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>
