使用Javascript开发的动态伸缩菜单
2009-11-09 20:12:40 来源:WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鎯у⒔閹虫捇鈥旈崘顏佸亾閿濆簼绨绘い鎺嬪灪閵囧嫰骞囬姣挎捇鏌熸笟鍨妞ゎ偅绮撳畷鍗炍旈埀顒勭嵁婵犲嫮纾介柛灞捐壘閳ь剛鎳撻~婵嬪Ω閳轰胶鐤呯紓浣割儐椤戞瑩宕ョ€n喗鐓曟い鎰靛亝缁舵氨绱撻崘鈺傜婵﹤顭峰畷鎺戔枎閹搭厽袦婵犵數濮崑鎾绘⒑椤掆偓缁夌敻骞嗛悙鍝勭婵烇綆鍓欐俊鑲╃磼閹邦収娈滈柡灞糕偓鎰佸悑閹肩补鈧尙鏁栧┑鐐村灦閹稿摜绮旈悽绋课﹂柛鏇ㄥ灠閸愨偓濡炪倖鍔﹀鈧繛宀婁邯濮婅櫣绱掑Ο璇茶敿闂佺ǹ娴烽弫璇差嚕婵犳碍鏅插璺猴工瀹撳棝姊虹紒妯哄缂佷焦鎸冲畷鎴﹀箻鐠囧弶宓嶅銈嗘尰缁嬫垶绂嶉悙顒佸弿婵☆垳鍘ф禍楣冩倵濮樼偓瀚�

本代码主要部分来源于网上,本人做了一些修改,使其能自动判断打开的高度,并且优化了一些代码,使其能同时在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>
Tags:使用 Javascript 开发
编辑录入:爽爽 [复制链接] [打 印]赞助商链接