本代码主要部分来源于网上，本人做了一些修改，使其能自动判断打开的高度，并且优化了一些代码，使其能同时在IE/Firefox中使用。
主要的JS代码，比较简单：
function $(_id)
{
return document.getElementById(_id)
}
var s=15;//移动步幅(px)
var minheight=28;//
var maxheight=300;//
var openN=0;//默认第1个自动展开
var timer;
var keyS=[],kl;
var contentS=[]
var keyOpen,keyNum=0;
function flexingcat(_this)
{
clearTimeout(timer)
keyOpen=_this.id;
keyNum=0;
var content=$(contentS[0]);
flexing()
}
function flexing(){
var tem=0
for (var i=0;i < kl;i++)
{
var key = $(keyS[i]);
var content=$(contentS[i]);
var t=content.style;
if(t.height==""||t.height==0)
t.height=minheight+"px";
var h=parseInt(t.height.toString().replace("px",""));
var tmaxHeight=parseInt(content.getAttribute("maxheight"));
if (keyOpen==keyS[i])//点击对象（展开）
{
if (h < tmaxHeight){
h+=s;
t.height=h+"px";
tem=1;
}
else {
t.height=tmaxHeight+"px";
}
}
else //非点击对象（收缩）
if (h > minheight){
h-=s;
t.height=h+"px";
tem=1;
}
else {
t.height=minheight+"px";
}
}
if (tem==1)
timer=setTimeout(flexing,1)
}
window.onload=function()
{
kl=keyS.length;
for (var i=0;i < kl;i++)
{
contentS[i]=$(keyS[i]).parentNode.id
}
flexingcat($(keyS[openN-1]));
}
前台html中调用的方法
相关的样式表
<style>
.content
{
width: 180px;
height: 28px;
padding: 0px;
overflow: hidden;
}
.key
{
font-weight: bold;
color: white;
float: left;
}
span
{
cursor: pointer;
}
</style>
接着是主要的HTML
<div id="content1" class="content" maxheight="180">
<span class="sidebartitle key" id="key1" onclick="flexingcat(this);">
<div class="style5">
主标题1</div>
<!-- end of style5-->
</span>
<!-- end of sidebartitle-->
<script type="text/javascript">keyS[keyS.length]="key1";</script>
<div class="sidebarmenu">
<ul>
<li><a class="link_3" href="#">子标题1</a></li>
<li><a class="link_3" href="#">子标题2</a></li>
<li><a class="link_3" href="#">子标题3</a></li>
<li><a class="link_3" href="#">子标题4</a></li>
<li><a class="link_3" href="#">子标题5</a></li>
<li><a class="link_3" href="#">子标题6</a></li>
<li><a class="link_3" href="#">子标题7</a></li>
</ul>
</div>
</div>
<div id="content2" class="content" maxheight="220">
<span class="sidebartitle key" id="key2" onclick="flexingcat(this);">
<div class="style5">
主标题2</div>
<!-- end of style5-->
</span>
<script type="text/javascript">keyS[keyS.length]="key2";</script>
<div class="sidebarmenu">
<ul>
<li><a class="link_3" href="#">子标题1</a></li>
<li><a class="link_3" href="#">子标题2</a></li>
<li><a class="link_3" href="#">子标题3</a></li>
<li><a class="link_3" href="#">子标题4</a></li>
<li><a class="link_3" href="#">子标题5</a></li>
<li><a class="link_3" href="#">子标题6</a></li>
<li><a class="link_3" href="#">子标题7</a></li>
<li><a class="link_3" href="#">子标题8</a></li>
<li><a class="link_3" href="#">子标题9</a></li>
</ul>
</div>
</div>
<div id="content3" class="content" maxheight="140">
<span class="sidebartitle key" id="key3" onclick="flexingcat(this);">
<div class="style5">
主标题3</div>
<!-- end of style5-->
</span>
<script type="text/javascript">keyS[keyS.length]="key3";</script>
<div class="sidebarmenu">
<ul>
<li><a class="link_3" href="#">子标题1</a></li>
<li><a class="link_3" href="#">子标题2</a></li>
<li><a class="link_3" href="#">子标题3</a></li>
<li><a class="link_3" href="#">子标题4</a></li>
<li><a class="link_3" href="#">子标题5</a></li>
</ul>
</div>
</div>