第一个样式菜单效果

第二个样式菜单效果

<!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">
/*第一个菜单CSS样式*/
.abslut {float: left; height: 22px; width: 333px; clear: left; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFFFFF; }
.bb { float: left; height: 0px; width: 333px; background-color: #E3F2DF; clear: left; overflow:hidden; }
body,td,th { font-size: 12px; }
/*第二个菜单CSS样式*/
body { margin: 30px auto;}
ul { list-style: none;}
#faq { font-size: 12px; width: 800px;}
#faq li { margin: 0 0 10px; padding: 0 0 5px;}
#faq dl { margin: 0; padding:0; display:inline;}
#faq dt { font-weight:bold; cursor:pointer; line-height: 20px; padding: 0 0 5px 22px; border-bottom:1px #ccc dotted;}
#faq dd { display:none; margin:0;padding: 5px 0 5px 20px;background:#E5ECF9;line-height: 180%;}
</style>
<script>
/* 第一个菜单js样式*/
var divheight =100; // 限制了高度，感觉不太爽
var speed=11;
var i=0;
var s;
var p=0;

function big(n){
    if(document.getElementById("bbb"+n).offsetHeight<11){
        i=0;
        inc(n);
    }else if(document.getElementById("bbb"+n).offsetHeight>divheight){
        p=divheight;
        inc2(n);
    }
}

function inc(x){
    i=i+10;
    document.getElementById("bbb"+x).style.height=i+"px";
    if(i>divheight){
        i=divheight-5;
    }
    var s=setTimeout("inc("+x+")",speed);
    if(i==95){
        window.clearTimeout(s);
    }
}

function inc2(x){
    if(p>1){
        p=p-10;
        document.getElementById("bbb"+x).style.height=p +"px";
    }
    var s=setTimeout("inc2("+x+")",speed);
    if(p==0){
        window.clearTimeout(s);
    }
}

/*第二个菜单JS样式*/
var lastFaqClick=null;
window.οnlοad=function(){
  var faq=document.getElementById("faq");
  var dls=faq.getElementsByTagName("dl");
  for (var i=0,dl;dl=dls[i];i++){
    var dt=dl.getElementsByTagName("dt")[0];//取得标题
     dt.id = "faq_dt_"+(Math.random()*100);
     dt.οnclick=function(){
       var p=this.parentNode;//取得父节点
        if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
          var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
          for (var i=0,dd;dd=dds[i];i++)
            dd.style.display='none';
        }
        lastFaqClick=this;
        var dds=p.getElementsByTagName("dd");//取得对应子节点，也就是说明部分
        var tmpDisplay='none';
        if (gs(dds[0],'display')=='none')
          tmpDisplay='block';
        for (var i=0;i<dds.length;i++)
          dds[i].style.display=tmpDisplay;
      }
  }
}
function gs(d,a){
  if (d.currentStyle){
    var curVal=d.currentStyle[a]
  }else{
    var curVal=document.defaultView.getComputedStyle(d, null)[a]
  }
  return curVal;
}
</script>
</head>
<body>
<!--第一个样式-->
<div class="abslut" id="botton1">栏目一</div>
<div class="bb" id="bbb1">123123123123</div>
<div class="abslut" id="botton2">栏目二</div>
<div class="bb" id="bbb2">234423</div>
<div class="abslut" οnclick="big(3)">栏目三</div>
<div class="bb" id="bbb3">24234</div>
<div class="abslut" οnclick="big(4)">栏目4</div>
<div class="bb" id="bbb4">24234</div>

<!--第二个样式-->
<ul id="faq">
  <li>
    <dl>
      <dt>AjAX是什么？</dt>
      <dd>一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
    </dl>
  </li>
   <li>
    <dl>
      <dt>AjAX是什么？</dt>
      <dd>一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
    </dl>
  </li>
 <li>
    <dl>
      <dt>AjAX是什么？</dt>
      <dd>一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
    </dl>
  </li>
</ul>
</body>
</html>