一个展开与收回子节点的html+js代码
<html>
<head>
<title>Directory to show and close</title>
<style>
body{font-family:sans-serif; background-color:F6F6F0; line-height:1.5;}
h1{font-size:45; color:crimson; font-famliy: "黑体"; font-weight:900;}
a{text-decoration:none; color:black;}
.a:hover{background:skyblue;}
h3{margin:-15 0 0 10; font-size:25;}
.main-border{border:7 solid silver; border-radius:3px; height:490; width:300; padding:10 0 0 0;}
.csymbol{margin:0 5 0 10; text-decoration:none;}
.csymbol-s a{margin:0 5 0 40; text-decoration:none; color:black;}
.csymbol-t a{margin:0 5 0 70; text-decoration:none; color:black;}
::-webkit-scrollbar {
width:14px;
height:14px;
background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(202,202,202,0.07)),color-stop(100%,rgba(229,229,229,0.07)));
background:-webkit-linear-gradient(left,rgba(202,202,202,0.07) 0%,rgba(229,229,229,0.07) 100%);
background-color:rgba(229,229,229,.3);
-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
box-shadow:0 0 2px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
overflow:visible;
border-radius:4px;
border:solid 2px #A6A6A6;
}
::-webkit-scrollbar-button {
width:0;
height:0; display:block;
background-color:transparent;
}
::-webkit-scrollbar-thumb {
background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(233,233,233,0.05)),color-stop(100%,rgba(221,221,221,0.05)));
background:-webkit-linear-gradient(left,rgba(233,233,233,0.05) 0%,rgba(221,221,221,0.05) 100%);
-webkit-box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;
box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;
background-color:rgba(229,229,229,.9);
overflow:visible;
border-radius:4px;
border:solid 3px #A6A6A6;
}
::-webkit-scrollbar-thumb:active{
background-color:rgba(229,229,229,1);
-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset;
box-shadow:0 0 2px 0 rgba(0,0,0,.15) inset;
}
::-webkit-scrollbar-thumb:hover{
background-color:rgba(229,229,229,.4);
}
::-webkit-scrollbar-corner {}
::-webkit-resizer {}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-track-piece {}
</style>
</head>
<body>
<script type="text/javascript" src="./main.js"></script>
<div style="background-color:F0F0F0; width:100.7%; margin:-10 0 0 -10; padding:0 0 0 10;">
<table>
<td><h1>Directory to show and close</h1></td>
<td><h3>For my friends</h3></td>
</table>
<div style="width:101%; height:3; background-color:silver; margin:-40 0 0 -10;"></div>
</div>
<br />
<b style="border:2 solid silver; border-radius:5px; background-color:silver; margin:0 0 0 23; padding:0 15 6 15;">大纲</b>
<table style="margin:0 0 0 20;">
<td>
<div class="main-border" style="overflow: scroll;">
<a href="#" onclick="showdownlist(); return false;" class="csymbol"><img id="show" src="./plus.gif"><a href="#" style="margin:0 0 0 0;" class="a">第一个总节点</a></a>
<div id="downlist" style="display:none;" class="csymbol-s">
<a href="#" onclick="showdownlist2(); return false;"><img id="show2" src="./plus.gif"><a href="#" style="margin:0 0 0 0;" class="a">第一个子节点 </a></a>
<div id="downlist2" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
<div style="width:100%;"><a href="#" onclick="showdownlist3(); return false;"><img id="show3" src="./plus.gif"></a><a href="#" style="margin:0 0 0 0;" class="a">第二个子节点</a></div>
<div id="downlist3" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
<div style="width:100%;"><a href="#" onclick="showdownlist4(); return false;"><img id="show4" src="./plus.gif"></a><a href="#" style="margin:0 0 0 0;" class="a">第三个子节点</a></div>
<div id="downlist4" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
<div style="width:100%;"><a href="#" onclick="showdownlist5(); return false;"><img id="show5" src="./plus.gif"></a><a href="#" style="margin:0 0 0 0;" class="a">第四个子节点</a></div>
<div id="downlist5" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
<div style="width:100%;"><a href="#" onclick="showdownlist6(); return false;"><img id="show6" src="./plus.gif"></a><a href="#" style="margin:0 0 0 0;" class="a">第五个子节点</a></div>
<div id="downlist6" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
<div style="width:100%;"><a href="#" onclick="showdownlist7(); return false;"><img id="show7" src="./plus.gif"></a><a href="#" style="margin:0 0 0 0;" class="a">第六个子节点</a></div>
<div id="downlist7" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
</div>
</div>
</td>
</table>
<script>
function showdownlist(){
if(document.getElementById("downlist").style.display=="none"){
document.getElementById("downlist").style.display="block";
document.getElementById("show").src="./minus.gif";
}else{
document.getElementById("downlist").style.display="none";
document.getElementById("show").src="./plus.gif";
}
}
function showdownlist2(){
if(document.getElementById("downlist2").style.display=="none"){
document.getElementById("downlist2").style.display="block";
document.getElementById("show2").src="./minus.gif";
}else{
document.getElementById("downlist2").style.display="none";
document.getElementById("show2").src="./plus.gif";
}
}
function showdownlist3(){
if(document.getElementById("downlist3").style.display=="none"){
document.getElementById("downlist3").style.display="block";
document.getElementById("show3").src="./minus.gif";
}else{
document.getElementById("downlist3").style.display="none";
document.getElementById("show3").src="./plus.gif";
}
}
function showdownlist4(){
if(document.getElementById("downlist4").style.display=="none"){
document.getElementById("downlist4").style.display="block";
document.getElementById("show4").src="./minus.gif";
}else{
document.getElementById("downlist4").style.display="none";
document.getElementById("show4").src="./plus.gif";
}
}
function showdownlist5(){
if(document.getElementById("downlist5").style.display=="none"){
document.getElementById("downlist5").style.display="block";
document.getElementById("show5").src="./minus.gif";
}else{
document.getElementById("downlist5").style.display="none";
document.getElementById("show5").src="./plus.gif";
}
}
function showdownlist6(){
if(document.getElementById("downlist6").style.display=="none"){
document.getElementById("downlist6").style.display="block";
document.getElementById("show6").src="./minus.gif";
}else{
document.getElementById("downlist6").style.display="none";
document.getElementById("show6").src="./plus.gif";
}
}
function showdownlist7(){
if(document.getElementById("downlist7").style.display=="none"){
document.getElementById("downlist7").style.display="block";
document.getElementById("show7").src="./minus.gif";
}else{
document.getElementById("downlist7").style.display="none";
document.getElementById("show7").src="./plus.gif";
}
}
</script>
</body>
<head>
<title>Directory to show and close</title>
<style>
body{font-family:sans-serif; background-color:F6F6F0; line-height:1.5;}
h1{font-size:45; color:crimson; font-famliy: "黑体"; font-weight:900;}
a{text-decoration:none; color:black;}
.a:hover{background:skyblue;}
h3{margin:-15 0 0 10; font-size:25;}
.main-border{border:7 solid silver; border-radius:3px; height:490; width:300; padding:10 0 0 0;}
.csymbol{margin:0 5 0 10; text-decoration:none;}
.csymbol-s a{margin:0 5 0 40; text-decoration:none; color:black;}
.csymbol-t a{margin:0 5 0 70; text-decoration:none; color:black;}
::-webkit-scrollbar {
width:14px;
height:14px;
background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(202,202,202,0.07)),color-stop(100%,rgba(229,229,229,0.07)));
background:-webkit-linear-gradient(left,rgba(202,202,202,0.07) 0%,rgba(229,229,229,0.07) 100%);
background-color:rgba(229,229,229,.3);
-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
box-shadow:0 0 2px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
overflow:visible;
border-radius:4px;
border:solid 2px #A6A6A6;
}
::-webkit-scrollbar-button {
width:0;
height:0; display:block;
background-color:transparent;
}
::-webkit-scrollbar-thumb {
background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(233,233,233,0.05)),color-stop(100%,rgba(221,221,221,0.05)));
background:-webkit-linear-gradient(left,rgba(233,233,233,0.05) 0%,rgba(221,221,221,0.05) 100%);
-webkit-box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;
box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;
background-color:rgba(229,229,229,.9);
overflow:visible;
border-radius:4px;
border:solid 3px #A6A6A6;
}
::-webkit-scrollbar-thumb:active{
background-color:rgba(229,229,229,1);
-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset;
box-shadow:0 0 2px 0 rgba(0,0,0,.15) inset;
}
::-webkit-scrollbar-thumb:hover{
background-color:rgba(229,229,229,.4);
}
::-webkit-scrollbar-corner {}
::-webkit-resizer {}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-track-piece {}
</style>
</head>
<body>
<script type="text/javascript" src="./main.js"></script>
<div style="background-color:F0F0F0; width:100.7%; margin:-10 0 0 -10; padding:0 0 0 10;">
<table>
<td><h1>Directory to show and close</h1></td>
<td><h3>For my friends</h3></td>
</table>
<div style="width:101%; height:3; background-color:silver; margin:-40 0 0 -10;"></div>
</div>
<br />
<b style="border:2 solid silver; border-radius:5px; background-color:silver; margin:0 0 0 23; padding:0 15 6 15;">大纲</b>
<table style="margin:0 0 0 20;">
<td>
<div class="main-border" style="overflow: scroll;">
<a href="#" onclick="showdownlist(); return false;" class="csymbol"><img id="show" src="./plus.gif"><a href="#" style="margin:0 0 0 0;" class="a">第一个总节点</a></a>
<div id="downlist" style="display:none;" class="csymbol-s">
<a href="#" onclick="showdownlist2(); return false;"><img id="show2" src="./plus.gif"><a href="#" style="margin:0 0 0 0;" class="a">第一个子节点 </a></a>
<div id="downlist2" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
<div style="width:100%;"><a href="#" onclick="showdownlist3(); return false;"><img id="show3" src="./plus.gif"></a><a href="#" style="margin:0 0 0 0;" class="a">第二个子节点</a></div>
<div id="downlist3" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
<div style="width:100%;"><a href="#" onclick="showdownlist4(); return false;"><img id="show4" src="./plus.gif"></a><a href="#" style="margin:0 0 0 0;" class="a">第三个子节点</a></div>
<div id="downlist4" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
<div style="width:100%;"><a href="#" onclick="showdownlist5(); return false;"><img id="show5" src="./plus.gif"></a><a href="#" style="margin:0 0 0 0;" class="a">第四个子节点</a></div>
<div id="downlist5" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
<div style="width:100%;"><a href="#" onclick="showdownlist6(); return false;"><img id="show6" src="./plus.gif"></a><a href="#" style="margin:0 0 0 0;" class="a">第五个子节点</a></div>
<div id="downlist6" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
<div style="width:100%;"><a href="#" onclick="showdownlist7(); return false;"><img id="show7" src="./plus.gif"></a><a href="#" style="margin:0 0 0 0;" class="a">第六个子节点</a></div>
<div id="downlist7" style="display:none;" class="csymbol-t">
<a href="#" class="a">Bula Bula</a>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
<div style="width:100%;"><a href="#" class="a">Bula Bula</a></div>
</div>
</div>
</div>
</td>
</table>
<script>
function showdownlist(){
if(document.getElementById("downlist").style.display=="none"){
document.getElementById("downlist").style.display="block";
document.getElementById("show").src="./minus.gif";
}else{
document.getElementById("downlist").style.display="none";
document.getElementById("show").src="./plus.gif";
}
}
function showdownlist2(){
if(document.getElementById("downlist2").style.display=="none"){
document.getElementById("downlist2").style.display="block";
document.getElementById("show2").src="./minus.gif";
}else{
document.getElementById("downlist2").style.display="none";
document.getElementById("show2").src="./plus.gif";
}
}
function showdownlist3(){
if(document.getElementById("downlist3").style.display=="none"){
document.getElementById("downlist3").style.display="block";
document.getElementById("show3").src="./minus.gif";
}else{
document.getElementById("downlist3").style.display="none";
document.getElementById("show3").src="./plus.gif";
}
}
function showdownlist4(){
if(document.getElementById("downlist4").style.display=="none"){
document.getElementById("downlist4").style.display="block";
document.getElementById("show4").src="./minus.gif";
}else{
document.getElementById("downlist4").style.display="none";
document.getElementById("show4").src="./plus.gif";
}
}
function showdownlist5(){
if(document.getElementById("downlist5").style.display=="none"){
document.getElementById("downlist5").style.display="block";
document.getElementById("show5").src="./minus.gif";
}else{
document.getElementById("downlist5").style.display="none";
document.getElementById("show5").src="./plus.gif";
}
}
function showdownlist6(){
if(document.getElementById("downlist6").style.display=="none"){
document.getElementById("downlist6").style.display="block";
document.getElementById("show6").src="./minus.gif";
}else{
document.getElementById("downlist6").style.display="none";
document.getElementById("show6").src="./plus.gif";
}
}
function showdownlist7(){
if(document.getElementById("downlist7").style.display=="none"){
document.getElementById("downlist7").style.display="block";
document.getElementById("show7").src="./minus.gif";
}else{
document.getElementById("downlist7").style.display="none";
document.getElementById("show7").src="./plus.gif";
}
}
</script>
</body>