列表不能像老师讲的那样可以下拉,找了半天,不知道错在哪里,求高手指教
<!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 type="text/css">
table{
border: #096 1px solid;
width:100px;
border-collapse:collapse;
}
table td{
border:#00F 1px solid;
background-color: #FF3;
text-align:center;
}
table td div{
background-color: #CF9;
}
table td a:link,table td a:visited{
color: #F6C;
text-decoration:none;
}
table td a:hover{
color: #3F0;
}
table td div{
display:none;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list3(anode)
{
var tdNode = anode.parentNode;
var divNode = tdNode.getElementsByTagName("div")[0];
with(divNode)
{
if(className == "open")
{
className == "close";
}
else
{
className == "open";
}
}
/*
var tabNode = document.getElementsByName("table")[0];
var divNodes = tabNode.getElementsByTagName("div");
for (var x=0; x<divNodes.length; x++)
{
if(divNodes[x]==divNode)
{
with(divNoeds[x])
{
if(className == "open")
{
className == "close";
}
else
{
className == "open";
}
}
}
else
divNodes[x].className = "close";
}*/
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list3(this)">好友列表</a>
<div>
大土豆<br />
大土豆<br />
大土豆<br />
大土豆<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list3(this)">好友列表</a>
<div>
大土豆<br />
大土豆<br />
大土豆<br />
大土豆<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list3(this)">好友列表</a>
<div>
大土豆<br />
大土豆<br />
大土豆<br />
大土豆<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list3(this)">好友列表</a>
<div>
大土豆<br />
大土豆<br />
大土豆<br />
大土豆<br />
</div>
</td>
</tr>
</table>
</body>
</html>
|
|