给你个类似效果代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type='text/javascript'>  </script>
<style type="text/css"> 
body { 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
background="../src/back.gif"; 
font-size:12px;
  } 
</style> 
</head>
<body>
<input type='button' onclick='showTable(this)' value='收缩'>
<div id='briefInfo' style="width:160px; height:90px; background-color:#f4f4f4;overflow:hidden; " >
asdfasdfasdfasdfasdfklasjdflkjasldfk<br/>jalsdkfjlaskdfjlaksjdfl<br/>kajsldfkjalskfja<br/>sdfjlaksjdflkaj<br/>sldfkjalsdkfj<br/>lskdfjlaskdfjlksfjlsjdfklj
</div>
<script language="JavaScript"> 
var s;
var div=document.getElementById("briefInfo");
div.sign=false;
var button=document.getElementsByTagName("input")[0];
function showTable(){
//var divHeight=parseInt(div.style.height);
if(div.sign==false){
div.style.height=parseInt(div.style.height)-1+"px"; if(parseInt(div.style.height)<=0){
div.style.height="0px";
clearTimeout(s);
button.value='展开';
div.sign=true;
return
}
}else{
div.style.height=parseInt(div.style.height)+1+"px";
if(parseInt(div.style.height)>=90){
div.style.height="90px";
clearTimeout(s);
button.value='收缩';
div.sign=false;
return;
}
}
s=setTimeout(showTable,10);
}
</script> 
</body>
</html>

解决方案 »

  1.   

    还是层显示效果  onmouseover=“”   onmouseout=“”  
      

  2.   

    onmouseover=“”  onmouseout=“”  效果是鼠标放上去的效果,我要的是滑动的效果!
      

  3.   

    最近在看ExtJS,在ExtJS中很容易实现你要的效果。这是范例。
    http://extjs.com/deploy/dev/examples/panel/panels.html
    在ExtJS只需很少的代码,就能实现效果。
      

  4.   

    dojo里的titlepanel,效果一模一样,下拉后的内容自己加
      

  5.   

    dengzh2006 说的能否给个具体的地址么?找 了一圈也没找到
      

  6.   

    fireaap  给的我修改了,不错,谢谢,不知道有说明么,我想改变默认状态下的显示是关闭的.