用JS实现收缩式菜单？急等。。。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
<style TYPE=text/css>
td{font-size:10pt;cursor:hand;}
</style>
<script language = "javascript">
var field = document.all.item("SHArea");
var scrollSpeed = 8; //滑动速度
var scrollASpeed = 0; //滑动加速度
var scrollRate = 10; //滑动间隔(毫秒)
var controlready = true;//防止滑动期间引起其他滑动
function window.onload()
{
if(scrollSpeed==0 && scrollASpeed==0)scrollSpeed=5;//判断如果滑动速度和加速度都为0 则滑动速度设定为5
for(var i=0;i<field.cells.length;i++) //读取没个DIV的实际高度
{
var tempObj = field.cells[i].children[0].cells[1].children[0];
tempObj.setAttribute("defaultHeight",tempObj.offsetHeight);
tempObj.parentElement.parentElement.style.display = "none"
tempObj.style.overflowY = "hidden";//没设定DIV.style.overflow-y的属性时使用
}
} function MouseOver(incomingobj)
{
if(!controlready){return;}
var hiddenObj=null;
var showObj=null;
showObj = incomingobj.parentElement.parentElement.rows[1].children[0].children[0];
for(var i=0;i<field.cells.length;i++)
{
hiddenObj = field.cells[i].children[0].cells[1].children[0];

if(hiddenObj != showObj)
{
if(hiddenObj.parentElement.parentElement.style.display == "")
{
controlready = false;
movehidden(hiddenObj.sourceIndex,hiddenObj.defaultHeight,scrollSpeed);
}

}
else
{
if(hiddenObj.parentElement.parentElement.style.display == "none")
{
showObj.parentElement.parentElement.style.display = "";
showObj.style.height = 1;
moveshow(showObj.sourceIndex,1,scrollSpeed);
}
}
}
}

function moveshow(objIndex,tempint,offint)
{
var showObj = document.all.item(objIndex);
if(tempint < showObj.defaultHeight)
{
offint = offint + scrollASpeed;
var nowheight = tempint + offint;
showObj.style.height = nowheight;
setTimeout("moveshow(" + objIndex + "," + nowheight + "," + offint + ")",scrollRate);
}
else
{
showObj.style.height = showObj.defaultHeight;
setTimeout("controlready=true",300);
}
}

function movehidden(objIndex,tempint,offint)
{
var hiddenObj = document.all.item(objIndex);
if(tempint > 1)
{
offint = offint + scrollASpeed;
nowheight = tempint - offint;
if(nowheight <= 0)nowheight = 1;
hiddenObj.style.height = nowheight;
setTimeout("movehidden(" + objIndex + "," + nowheight + "," + offint + ")",scrollRate);
}
else
{
hiddenObj.parentElement.parentElement.style.display = "none";
setTimeout("controlready=true",300);
}
}</script></head>
<body>
<table width="100" border="0" cellspacing="0" cellpadding="0" id="SHArea">
<tr>
<td align="center">
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td height="18" align="center" bordercolor="#0099FF" bgcolor="#0099FF" onclick="MouseOver(this)"><font color="#FFFFFF">测试1</font></td>
</tr>
<tr>
<td align="center" bordercolor="#FFFFFF">
<div>
<table width="100%" border="1" cellpadding="0" cellspacing="1">
<tr><td align="center">1</td></tr>
<tr><td align="center">2</td></tr>
<tr><td align="center">3</td></tr>
<tr><td align="center">4</td></tr>
<tr><td align="center">5</td></tr>
<tr><td align="center">6</td></tr>
  </table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td height="18" align="center" bordercolor="#0099FF" bgcolor="#0099FF" onclick="MouseOver(this)"><font color="#FFFFFF">测试2</font></td>
</tr>
<tr>
<td align="center" bordercolor="#FFFFFF">
<div>
<table width="100%" border="1" cellpadding="0" cellspacing="1">
<tr><td align="center">1</td></tr>
<tr><td align="center">2</td></tr>
<tr><td align="center">3</td></tr>
<tr><td align="center">4</td></tr>
<tr><td align="center">5</td></tr>
<tr><td align="center">6</td></tr>
  </table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td height="18" align="center" bordercolor="#0099FF" bgcolor="#0099FF" onclick="MouseOver(this)"><font color="#FFFFFF">测试3</font></td>
</tr>
<tr>
<td align="center" bordercolor="#FFFFFF">
<div>
<table width="100%" border="1" cellpadding="0" cellspacing="1">
<tr><td align="center">1</td></tr>
<tr><td align="center">2</td></tr>
<tr><td align="center">3</td></tr>
<tr><td align="center">4</td></tr>
<tr><td align="center">5</td></tr>
<tr><td align="center">6</td></tr>
  </table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
我改了一下，但是收缩不上去呀。。不知道哪的原因？？没有实现效果。。
不好意思突然发现我这有个新的<style>
td{font-size:10pt;cursor:hand;}
</style>
<body>
<a herf="javascript:;" onMouseOver="aa(this)" onMouseOut="bb()" inst="1<br>1<br>1<br>1<br>1<br>1<br>1<br>">test1</a>
<a herf="javascript:;" onMouseOver="aa(this)" onMouseOut="bb()" inst="1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>">test2</a>
<a herf="javascript:;" onMouseOver="aa(this)" onMouseOut="bb()" inst="1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>">test3</a>
<div id="div1" style="background-color:#CCCCCC; border:1px #000000 solid; padding:2px;width:100px; overflow-y:hidden"><div id="div2"></div></div>
</body><script>
var scrollSpeed = 0; //滑动速度
var scrollASpeed = 1; //滑动加速度
var scrollRate = 10; //滑动间隔(毫秒)
var showObj1 = document.getElementById("div1"); //外层DIV
var showObj2 = document.getElementById("div2"); //内部DIVfunction bb()
{
showObj1.style.display = "none";
}

function aa(obj)
{
showObj1.style.display = "";
showObj1.style.height = 1; //初始化外层DIV 起始高度
showObj2.innerHTML = obj.inst; //改变内部DIV 的内容
moveshow(1,scrollSpeed);//激活方法
}
function moveshow(tempint,offint)
{
offint += scrollASpeed;
tempint += offint;
if(tempint < showObj2.offsetHeight) //判断当前高度是否小于内部DIV的高度
{
//小于开始滑动
showObj1.style.height = tempint;
setTimeout("moveshow(" + tempint + "," + offint + ")",scrollRate); //等待间隔时间继续触发本事件
}
else
showObj1.style.height = 0; //外部div的高度设定成自适应
}
</script>
这个好像是教我们一同事时写的这个用起来比较简单具体看你自己怎么处理DIV1里面的内容了
这个与上面的都是范例教学用的没有封装
一个是nav模式的下拉滚动条一个是自适应高度的下拉滚动条都没有实现具体功能只是实现部分效果
你自己看看里面的方法如果能理解的话就自己改改不行的话等我有时间再帮你改
不过我现在正在痛苦的写使用文档中