第一种过时,但是思路很好
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function demo()
{
var obj=event.srcElement;
//alert (obj.nodeName);
var dlNode=obj.parentNode;
//alert(dlNode.nodeName);
var dlNodes=document.getElementsByTagName("dl");//啊啊啊啊啊 getElementsByTagName
//alert(dlNodes.length);
for(var i=0;i<dlNodes.length;i++)
{
if(dlNodes[i]==dlNode)
{
if(dlNode.className=="open")
{
//dlNode.className="close";
dlNode.style.overflow="hidden";
}
else
{
//dlNode.className="open";
dlNode.style.overflow="visible";
}
}
else
{
//dlNodes[i].className="close";
dlNodes[i].style.overflow="hidden";
}
}
}
</script>
<style type="text/css">
.open{
overflow:visible;
}
.close{
overflow:
}
dl {
overflow:hidden;
height:16px;
}
</style>
</head>
<body>
<dl id="haha">
<dt οnclick="demo()">
上层项目
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
</dt>
</dl>
<dl>
<dt οnclick="demo()">
上层项目
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
</dt>
</dl>
<dl>
<dt οnclick="demo()">
上层项目
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
</dt>
</dl>
<dl>
<dt οnclick="demo()">
上层项目
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
<dd>有规律的气息,</dd>
<dd>高效的学习。</dd>
</dt>
</dl>
</body>
</html>
![](https://img-my.csdn.net/uploads/201303/09/1362764053_4213.png)
<!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=gb2312" />
<title>无标题文档</title>
<script>
function demo()
{
var a=event.srcElement;
//alert(a.nodeName);
var tdNode=a.parentNode;
//alert(tdNode.nodeName);
var divNode=tdNode.childNodes[2];#超链接里面的text也是一个节点
//alert(divNode.nodeName);
var divNodes=document.getElementsByTagName("div");
for(var i=0;i<divNodes.length;i++)
{
if(divNode==divNodes[i])
{
if(divNode.className=="open")
{
//divNode.className="close";
divNode.style.display="none";
}
else
{
//divNode.className="open";
divNode.style.display="block";
}
}
else
{
//divNodes[i].className="close";
divNodes[i].style.display="none";
}
}
}
</script>
<style>
table {
border: #666666 5px solid;
}
table td{
border: #00CCFF 10px solid;
}
table td a{
background-color:#00FF99;
border: #33FF66 5px solid;
}
table td div{
background-color:#00FF99;
display:none;
}
a:link,a:visited{
text-decoration:none;
color:#FF00FF;
}
.open{
display: block;
}
.close{
display:none;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<a href="#" οnclick="demo()">好友列表</a>
<div>
张三<br/>
李四<br/>
王五<br/>
</div>
</td>
</tr>
<tr>
<td>
<a href="#" οnclick="demo()">好友列表</a>
<div>
张三<br/>
李四<br/>
王五<br/>
</div>
</td>
</tr>
<tr>
<td>
<a href="#" οnclick="demo()">好友列表</a>
<div>
张三<br/>
李四<br/>
王五<br/>
</div>
</td>
</tr>
<tr>
<td>
<a href="#" οnclick="demo()">好友列表</a>
<div>
张三<br/>
李四<br/>
王五<br/>
</div>
</td>
</tr>
</table>
</body>
</html>
第一种方法是利用dl的overflow
第二种方法是利用div的display
视频示例01
获取事件源的两种方式
event.srcElement
this