使用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" 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>