这个功能主要是由CSS+DIV 再结合一点JS 做出来的效果...
以下原代码直接保存成html文件就可以运行
<html>
<head>
<title>javascript-1</title>
<style>
*{padding:0px;margin:0px;}
.cd{
200px;
}
.cd_title{
cursor:hand;
100%;
}
.cd_main{
border:5px solid #FF0000;
margin-left:30px;
100%;
filter:blendTrans(Duration=0.5);
}
ul,li{
list-style:square inside;
}
.cd_main li{
padding-left:10px;
background:url('1.gif') no-repeat left 8px;
}
</style>
<script>
function aa(obj){
obj.parentElement.childNodes[1].filters.blendTrans.apply();
obj.parentElement.childNodes[1].style.display=(obj.parentElement.childNodes[1].style.display=="none"?"block":"none");
obj.parentElement.childNodes[1].filters.blendTrans.play();
}
</script>
</head>
<body>
<div class="cd" style="background:red;">
<div class="cd_title" onclick="aa(this)" style="background:blue;">
title1
</div>
<div class="cd_main" style="display:none; background:green;">
sdfsdf
</div>
</div>
<div class="cd">
<div class="cd_title" onclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>
<div class="cd">
<div class="cd_title" onclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>
<div class="cd">
<div class="cd_title" onclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>123</li>
<li>123</li>
<li>
<div class="cd">
<div class="cd_title" onclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</li>
<li>123</li>
</ul>
</div>
</div>
</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</li>
<li>
<div class="cd">
<div class="cd_title" onclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</body>
</html>