function opencat(cat){
if(document.getElementById(cat).style.display=="none"){
document.getElementById(cat).style.display=""
}
else {
document.getElementById(cat).style.display="none"
}
}
然后在要收缩菜单的按钮或链接上这么做 比如超连接
<a id="menu1" href="#" style="display:block" onclick="opencat('list1')">
下面紧跟着的是展开后的目录内容,可以是Table,也可以是DIV
<table id="list1">
<tr><td>111111</td></tr>
<tr><td>222222</td></tr>
<tr><td>33333</td></tr>
<tr><td>4444444</td></tr>
<tr><td>5555555</td></tr>
</table>
代码如下:<style>
*{ padding: 0margin: 0}
.tree{ position: relative}
.tree div{ position: absolutewidth: 0height: 0}
.tree .wood{ width: 20pxheight: 50pxbackground-color:greyleft: 50%margin-left: -10pxtop: 170px}
.a1{ border-right: 40px solid greenborder-top: 40px solid #fffleft: 50%margin-left: -40pxtop: 0}
.a2{ border-left: 40px solid greenborder-top: 40px solid #fffleft: 50%top: 0}
.b1{ border-right: 70px solid greenborder-top: 70px solid #fffleft: 50%margin-left: -70pxtop: 20px}
.b2{ border-left: 70px solid greenborder-top: 70px solid #fffleft: 50%top: 20px}
.c1{ border-right: 100px solid greenborder-top: 100px solid #fffleft: 50%margin-left: -100pxtop: 70px}
.c2{ border-left: 100px solid greenborder-top: 100px solid #fffleft: 50%top: 70px}
</style>
<div class="tree">
<div class="wood"></div>
<div class=c1></div><div class=c2></div>
<div class=b1></div><div class=b2></div>
<div class="a1"></div><div class="a2"></div>
</div>