哈哈,终于把这个菜单弄出来了.散分!

我也正在愁这个问题,代码太散了,也没有封装的经验. 想用htc...

解决方案 »

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

连续点全部展开，然后再点其中一个，收缩，点击后就收缩不全了！！再点击几次，差的越来越多了！！呵呵BUG
我用IE7,没有出现lion98(韩宾)的问题啊...汗
加了一把锁,你再试试看...<!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" />
<title>无标题文档</title>
<style type="text/css">
* {
font-size:14px;
}
</style><script language="javascript">
var G_sub_menu;
var G_last_sub_menu;
var lock=false;function showSub(submenu){
lock=true;
submenu.style.display='block';
G_sub_menu=submenu;
slide();
}function slide(){
if(G_sub_menu.style.pixelHeight<437-25){
G_sub_menu.style.pixelHeight+=25;
G_last_sub_menu.style.pixelHeight-=25;
setTimeout(slide,10);
}
else{
G_sub_menu.style.pixelHeight=437;
G_last_sub_menu.style.pixelHeight=0;
G_last_sub_menu=G_sub_menu;
lock=false;
}
}function showAll(){
if(lock)return;
lock=true;
from_expand_all=true;
for(i=0;i<4;i++){
document.getElementById('sub'+i).style.display='block';
}
expandAll();
}function expandAll(){
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu && menu.style.pixelHeight<437/4-6){
menu.style.pixelHeight+=6;
}
else if(menu.style.pixelHeight>437/4+18){
menu.style.pixelHeight-=18;
}
else{
menu.style.pixelHeight=437/4;
lock=false;
return;
}
}
setTimeout(expandAll,10);
}var from_expand_all=false;
function hideAll(){
if(lock)return;
lock=true;
if(from_expand_all){
shrinkAll();
from_expand_all=false;
}
}function shrinkAll(){
var next=true;
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu){
if(menu.style.pixelHeight>6){
menu.style.pixelHeight-=6;
}
else{
menu.style.pixelHeight=0;
next=false;
}
}
else{
if(menu.style.pixelHeight<437-18){
menu.style.pixelHeight+=18;
}
else{
menu.style.pixelHeight=437;
next=false;
}
}
}
if(next){
setTimeout(shrinkAll,10);
}
else lock=false;
}function menuClick(num){
var submenu=document.getElementById('sub'+num);
if(from_expand_all){
G_last_sub_menu=submenu;
hideAll();
}
else
{
if(submenu!=G_last_sub_menu){
if(!lock)showSub(submenu);
}
}
}
</script>
</head><body>
<input type="button" onclick="showAll()" value="全部展开"/>
<input type="button" onclick="hideAll()" value="全部收缩"/>
<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(0)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub0" style="background-color:#FFFFCC; overflow:hidden; height:437px">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(1)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub1" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
    <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(2)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub2" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(3)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub3" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
</table>
<script language="javascript">
var G_last_sub_menu=document.getElementById('sub0');
</script>
</body>
</html>
获取用DIV+CSS更好,楼住你说呢
css不太熟啊~~~定位真头痛啊.再看看有没有好一点..<!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" />
<title>无标题文档</title>
<style type="text/css">
* {
font-size:14px;
}
</style><script language="javascript">
var G_sub_menu;
var G_last_sub_menu;
var lock=false;function showSub(submenu){
lock=true;
submenu.style.display='block';
G_sub_menu=submenu;
slide();
}function slide(){
if(G_sub_menu.style.pixelHeight<437-25){
G_sub_menu.style.pixelHeight+=25;
G_last_sub_menu.style.pixelHeight-=25;
setTimeout(slide,10);
}
else{
G_sub_menu.style.pixelHeight=437;
G_last_sub_menu.style.pixelHeight=0;
G_last_sub_menu=G_sub_menu;
lock=false;
}
}function showAll(){
from_expand_all=true;
for(i=0;i<4;i++){
document.getElementById('sub'+i).style.display='block';
}
expandAll();
}function expandAll(){
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu && menu.style.pixelHeight<437/4-6){
menu.style.pixelHeight+=6;
}
else if(menu.style.pixelHeight>437/4+18){
menu.style.pixelHeight-=18;
}
else{
menu.style.pixelHeight=437/4+1;
return;
}
}
setTimeout(expandAll,10);
}var from_expand_all=false;
function hideAll(){
if(from_expand_all){
shrinkAll();
from_expand_all=false;
}
}function shrinkAll(){
var next=true;
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu){
if(menu.style.pixelHeight>6){
menu.style.pixelHeight-=6;
}
else{
menu.style.pixelHeight=0;
next=false;
}
}
else{
if(menu.style.pixelHeight<437-18){
menu.style.pixelHeight+=18;
}
else{
menu.style.pixelHeight=437;
next=false;
}
}
}
if(next)setTimeout(shrinkAll,10);
}function menuClick(num){
var submenu=document.getElementById('sub'+num);
if(from_expand_all){
G_last_sub_menu=submenu;
hideAll();
}
else
{
if(submenu!=G_last_sub_menu){
if(!lock)showSub(submenu);
}
}
}
</script>
</head><body>
<input type="button" onclick="showAll()" value="全部展开"/>
<input type="button" onclick="hideAll()" value="全部收缩"/>
<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(0)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub0" style="background-color:#FFFFCC; overflow:hidden; height:437px">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(1)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub1" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
    <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(2)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub2" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(3)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub3" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
</table>
<script language="javascript">
var G_last_sub_menu=document.getElementById('sub0');
</script>
</body>
</html>
上面的还是垃圾,又改了...<!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" />
<title>无标题文档</title>
<style type="text/css">
* {
font-size:14px;
}
</style><script language="javascript">
var G_sub_menu;
var G_last_sub_menu;
var lock=false;function showSub(submenu){
lock=true;
submenu.style.display='block';
G_sub_menu=submenu;
slide();
}function slide(){
if(G_sub_menu.style.pixelHeight<437-25){
G_sub_menu.style.pixelHeight+=25;
G_last_sub_menu.style.pixelHeight-=25;
setTimeout(slide,10);
}
else{
G_sub_menu.style.pixelHeight=437;
G_last_sub_menu.style.pixelHeight=0;
G_last_sub_menu=G_sub_menu;
lock=false;
}
}function showAll(){
from_expand_all=true;
for(i=0;i<4;i++){
document.getElementById('sub'+i).style.display='block';
}
expandAll();
}function expandAll(){
var next=true;
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu && menu.style.pixelHeight<437/4-6){
menu.style.pixelHeight+=6;
}
else if(menu.style.pixelHeight>437/4+18){
menu.style.pixelHeight-=18;
}
else{
menu.style.pixelHeight=437/4;
next=false;
}
}
if(next)setTimeout(expandAll,10);
}var from_expand_all=false;
function hideAll(){
if(from_expand_all){
shrinkAll();
from_expand_all=false;
}
}function shrinkAll(){
var next=true;
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu){
if(menu.style.pixelHeight>6){
menu.style.pixelHeight-=6;
}
else{
menu.style.pixelHeight=0;
next=false;
}
}
else{
if(menu.style.pixelHeight<437-18){
menu.style.pixelHeight+=18;
}
else{
menu.style.pixelHeight=437;
next=false;
}
}
}
if(next)setTimeout(shrinkAll,10);
}function menuClick(num){
var submenu=document.getElementById('sub'+num);
if(from_expand_all){
G_last_sub_menu=submenu;
hideAll();
}
else
{
if(submenu!=G_last_sub_menu){
if(!lock)showSub(submenu);
}
}
}
</script>
</head><body>
<input type="button" onclick="showAll()" value="全部展开"/>
<input type="button" onclick="hideAll()" value="全部收缩"/>
<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(0)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub0" style="background-color:#FFFFCC; overflow:hidden; height:437px">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(1)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub1" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
    <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(2)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub2" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(3)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub3" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
</table>
<script language="javascript">
var G_last_sub_menu=document.getElementById('sub0');
</script>
</body>
</html>
<style>
td{font-size:10pt;cursor:hand;}
</style>
<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>
<script>
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>随手写了个参考参考吧
我恨FF...-----------------------------
FF测试完全不通过...
前面的都不要了,试试这个<!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" />
<title>无标题文档</title>
<style type="text/css">
* {
font-size:14px;
}
</style><script language="javascript">
var G_sub_menu;
var G_last_sub_menu;
var lock=false;function showSub(submenu){
lock=true;
submenu.style.display='block';
G_sub_menu=submenu;
slide();
}function slide(){
if(G_sub_menu.style.pixelHeight<437-25){
G_sub_menu.style.pixelHeight+=25;
G_last_sub_menu.style.pixelHeight-=25;
setTimeout(slide,10);
}
else{
G_sub_menu.style.pixelHeight=437;
G_last_sub_menu.style.pixelHeight=0;
G_last_sub_menu=G_sub_menu;
lock=false;
}
}function showAll(){
from_expand_all=true;
for(i=0;i<4;i++){
document.getElementById('sub'+i).style.display='block';
}
expandAll();
}function expandAll(){
var next=true;
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu && menu.style.pixelHeight<437/4-6){
menu.style.pixelHeight+=6;
}
else if(menu.style.pixelHeight>437/4+18){
menu.style.pixelHeight-=18;
}
else{
menu.style.pixelHeight=437/4;
next=false;
}
}
if(next)setTimeout(expandAll,10);
}var from_expand_all=false;
function hideAll(){
if(from_expand_all){
shrinkAll();
from_expand_all=false;
}
}function shrinkAll(){
var next=true;
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu){
if(menu.style.pixelHeight>6){
menu.style.pixelHeight-=6;
}
else{
menu.style.pixelHeight=0;
next=false;
}
}
else{
if(menu.style.pixelHeight<437-18){
menu.style.pixelHeight+=18;
}
else{
menu.style.pixelHeight=437;
next=false;
}
}
}
if(next)setTimeout(shrinkAll,10);
}function menuClick(num){
var submenu=document.getElementById('sub'+num);
if(from_expand_all){
G_last_sub_menu=submenu;
hideAll();
}
else
{
if(submenu!=G_last_sub_menu){
if(!lock)showSub(submenu);
}
}
}
</script>
</head><body>
<input type="button" onclick="showAll()" value="全部展开"/>
<input type="button" onclick="hideAll()" value="全部收缩"/>
<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(0)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub0" style="background-color:#FFFFCC; overflow:hidden; height:437px">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(1)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub1" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
    <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(2)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub2" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(3)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub3" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
</table>
<script language="javascript">
var G_last_sub_menu=document.getElementById('sub0');
</script>
</body>
</html>
我保证这是最终版了,要是还能折腾出个什么东西来,我就服了你们!----------------------------------------------------------
<!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" />
<title>无标题文档</title>
<style type="text/css">
* {
font-size:14px;
}
</style><script language="javascript">
var G_sub_menu;
var G_last_sub_menu;
var lock=false;function showSub(submenu){
lock=true;
submenu.style.display='block';
G_sub_menu=submenu;
slide();
}function slide(){
if(G_sub_menu.style.pixelHeight<437-25){
G_sub_menu.style.pixelHeight+=25;
G_last_sub_menu.style.pixelHeight-=25;
setTimeout(slide,10);
}
else{
G_sub_menu.style.pixelHeight=437;
G_last_sub_menu.style.pixelHeight=0;
G_last_sub_menu=G_sub_menu;
lock=false;
}
}function showAll(){
from_expand_all=true;
for(i=0;i<4;i++){
document.getElementById('sub'+i).style.display='block';
}
lock=true;
shrink_next=false;
expand_next=true;
expandAll();
}var expand_next=true;
function expandAll(){
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu && menu.style.pixelHeight<437/4-6){
menu.style.pixelHeight+=6;
}
else if(menu.style.pixelHeight>437/4+18){
menu.style.pixelHeight-=18;
}
else{
menu.style.pixelHeight=437/4;
expand_next=false;
}
}
if(expand_next)setTimeout(expandAll,10);
else lock=false;
}var from_expand_all=false;
function hideAll(){
if(from_expand_all){
lock=true;
shrink_next=true;
expand_next=false;
shrinkAll();
from_expand_all=false;
}
}var shrink_next=true;
function shrinkAll(){
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu){
if(menu.style.pixelHeight>6){
menu.style.pixelHeight-=6;
}
else{
menu.style.pixelHeight=0;
shrink_next=false;
}
}
else{
if(menu.style.pixelHeight<437-18){
menu.style.pixelHeight+=18;
}
else{
menu.style.pixelHeight=437;
shrink_next=false;
}
}
}
if(shrink_next)setTimeout(shrinkAll,10);
else lock=false;
}function menuClick(num){
var submenu=document.getElementById('sub'+num);
if(from_expand_all){
G_last_sub_menu=submenu;
hideAll();
}
else
{
if(submenu!=G_last_sub_menu){
if(!lock)showSub(submenu);
}
}
}
</script>
</head><body>
<input type="button" onclick="showAll()" value="全部展开"/>
<input type="button" onclick="hideAll()" value="全部收缩"/>
<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(0)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub0" style="background-color:#FFFFCC; overflow:hidden; height:437px">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(1)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub1" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
    <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(2)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub2" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(3)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub3" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
</table>
<script language="javascript">
var G_last_sub_menu=document.getElementById('sub0');
</script>
</body>
</html>
服了, 测试的就是强!
这回应该万无一失了
-------------------------
<!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" />
<title>无标题文档</title>
<style type="text/css">
* {
font-size:14px;
}
</style><script language="javascript">
var G_sub_menu;
var G_last_sub_menu;
var lock=false;function showSub(submenu){
lock=true;
submenu.style.display='block';
G_sub_menu=submenu;
slide();
}function slide(){
if(G_sub_menu.style.pixelHeight<437-25){
G_sub_menu.style.pixelHeight+=25;
G_last_sub_menu.style.pixelHeight-=25;
setTimeout(slide,10);
}
else{
G_sub_menu.style.pixelHeight=437;
G_last_sub_menu.style.pixelHeight=0;
G_last_sub_menu=G_sub_menu;
lock=false;
}
}function showAll(){
if(lock)return;
from_expand_all=true;
for(i=0;i<4;i++){
document.getElementById('sub'+i).style.display='block';
}
lock=true;
shrink_next=false;
expand_next=true;
expandAll();
}var expand_next=true;
function expandAll(){
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu && menu.style.pixelHeight<437/4-6){
menu.style.pixelHeight+=6;
}
else if(menu.style.pixelHeight>437/4+18){
menu.style.pixelHeight-=18;
}
else{
menu.style.pixelHeight=437/4;
expand_next=false;
}
}
if(expand_next)setTimeout(expandAll,10);
else lock=false;
}var from_expand_all=false;
function hideAll(){
if(from_expand_all){
lock=true;
shrink_next=true;
expand_next=false;
shrinkAll();
from_expand_all=false;
}
}var shrink_next=true;
function shrinkAll(){
for(i=0;i<4;i++){
var menu=document.getElementById('sub'+i);
if(menu!=G_last_sub_menu){
if(menu.style.pixelHeight>6){
menu.style.pixelHeight-=6;
}
else{
menu.style.pixelHeight=0;
shrink_next=false;
}
}
else{
if(menu.style.pixelHeight<437-18){
menu.style.pixelHeight+=18;
}
else{
menu.style.pixelHeight=437;
shrink_next=false;
}
}
}
if(shrink_next)setTimeout(shrinkAll,10);
else lock=false;
}function menuClick(num){
var submenu=document.getElementById('sub'+num);
if(from_expand_all){
G_last_sub_menu=submenu;
hideAll();
}
else
{
if(submenu!=G_last_sub_menu){
if(!lock)showSub(submenu);
}
}
}
</script>
</head><body>
<input type="button" onclick="showAll()" value="全部展开"/>
<input type="button" onclick="hideAll()" value="全部收缩"/>
<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(0)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub0" style="background-color:#FFFFCC; overflow:hidden; height:437px">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(1)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub1" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
    <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(2)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub2" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
  <tr>
    <td><div style="background-color:#3399FF; cursor:hand" onclick="menuClick(3)">此处显示新 Div 标签的内容</div></td>
  </tr>
  <tr>
    <td><div id="sub3" style="background-color:#FFFFCC; height:0px ; overflow:hidden">"蜘蛛"（Spider）是Internet上一种很有用的程序，搜索引擎利用蜘蛛程序将Web页面收集到数据库，企业利用蜘蛛程序监视竞争对手的网站并跟踪变动，个人用户用蜘蛛程序下载Web页面以便脱机使用，开发者利用蜘蛛程序扫描自己的Web检查无效的链接……对于不同的用户，蜘蛛程序有不同的用途。那么，蜘蛛程序到底是怎样工作的呢？</div></td>
  </tr>
</table>
<script language="javascript">
var G_last_sub_menu=document.getElementById('sub0');
</script>
</body>
</html>