Javascript 垂直滑动伸缩菜单
来源：互联网 发布：造价师工程师网络教育 编辑：程序博客网 时间：2024/05/22 03:44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author" content="Pony" /><title>垂直滑动伸缩菜单</title><style type="text/css">/*不同的菜单可以应用不同的样式*/.container{ float:left; margin:10px; width:200px; border:2px solid red; }.container1{ float:left; margin:10px; width:200px; border:2px solid blue; }.container2{ float:left; margin:10px; width:200px; border:2px solid green; }.toggleblock1{ overflow:hidden; color:red; }.toggletitle1{ margin:0; padding:5px; color:blue; }.toggletitle1 span{ float:right; cursor:pointer; }.toggleblock2{ overflow:hidden; background:#ddd; color:blue; }.toggletitle2{ margin:0; padding:5px; color:green; }.toggletitle2 span{ float:right; cursor:pointer; }/* 以下CSS为满足效果需要的最少代码，可以在此基础上扩充但不能缩减 */.toggleblock{ overflow:hidden; }.toggletitle{ margin:0; padding:5px; }.toggletitle span{ float:right; cursor:pointer; }</style></head><body><div id="test" class="container"><div class="toggleblock"><h4 class="toggletitle"><span>-</span>栏目标题一</h4><div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div><div class="toggleblock"><h4 class="toggletitle"><span>-</span>栏目标题二</h4><div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div><div class="toggleblock"><h4 class="toggletitle"><span>-</span>栏目标题三</h4><div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div></div><div id="test1" class="container1"><div class="toggleblock1"><h4 class="toggletitle1"><span>-</span>栏目标题一</h4><div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div><div class="toggleblock1"><h4 class="toggletitle1"><span>-</span>栏目标题二</h4><div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div><div class="toggleblock1"><h4 class="toggletitle1"><span>-</span>栏目标题三</h4><div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div></div><div id="test2" class="container2"><div class="toggleblock2"><h4 class="toggletitle2"><span>-</span>栏目标题一</h4><div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div><div class="toggleblock2"><h4 class="toggletitle2"><span>-</span>栏目标题二</h4><div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div><div class="toggleblock2"><h4 class="toggletitle2"><span>-</span>栏目标题三</h4><div>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div></div><script type="text/javascript">function getElementsByClassName(id,cls){var o=document.getElementById(id);var aelem=[],oaelem=o.getElementsByTagName("*");for(var i=0;i<oaelem.length;i++){if (oaelem[i].className==cls ){aelem[aelem.length]=oaelem[i];}}return aelem;}function slideshow(obj){//标题对象var otitle=obj.getElementsByTagName("h4")[0];//待伸缩的层对象var oblock=obj.getElementsByTagName("div")[0];//触发链接对象var olink=otitle.firstChild;//整个菜单的高度var i=obj.offsetHeight;if(i<(otitle.offsetHeight+oblock.offsetHeight)){i+=10;obj.style.height=i+"px";}else{clearInterval(t);olink.onclick=function(){t2=setInterval(function(){slidehidden(obj)},10)}//这里放图片文字都行olink.innerHTML="-";}}function slidehidden(obj){//标题对象var otitle=obj.getElementsByTagName("h4")[0];//待伸缩的层对象var oblock=obj.getElementsByTagName("div")[0];//触发链接对象var olink=otitle.firstChild;//整个菜单的高度var i=obj.offsetHeightif(i>otitle.offsetHeight){i-=10;obj.style.height=i+"px";}else{clearInterval(t2);olink.onclick=function(){t=setInterval(function(){slideshow(obj)},10)}//这里放图片文字都行olink.innerHTML="+";}}//第一个参数是菜单BLOCK的ID名，第二个参数是每一个菜单项目的CLASS名，不同的菜单样式可以不同var a=getElementsByClassName("test","toggleblock");var b=getElementsByClassName("test1","toggleblock1");var c=getElementsByClassName("test2","toggleblock2");//如果需要添加菜单，添加以下项目即可，同时增加数组duality//var d=getElementsByClassName("test3","toggleblock3");var duality=[a,b,c]for(var m=0;m<duality.length;m++){for(var n=0;n<duality[m].length;n++){var olink=duality[m][n].getElementsByTagName("h4")[0].firstChild;olink.onclick=new Function("t2=setInterval(function(){slidehidden(duality["+m+"]["+n+"])},10)");}}</script></body></html>
