使用Javascript开发的动态伸缩菜单

本代码主要部分来源于网上，本人做了一些修改，使其能自动判断打开的高度，并且优化了一些代码，使其能同时在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" >
　 <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" >
　 <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" >
　 <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>