一个简洁型伸缩菜单

<p>一个简洁型伸缩菜单</p>
<style><!--
*{margin:0; padding:0;}
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;}
#box{width:700px; border:1px solid #ccc;}
.title{ font-size:16px;padding-left:30px; height:30px; border-bottom:1px solid #fff; background:gray; line-height:20px; color:#fff; cursor:pointer;}
.mrc{ padding:15px; height:150px;}
--></style>
<script type="text/javascript">// <![CDATA[
function flexMenu(id)
{
 var $id = document.getElementById(id);
 var titleList = $id.getElementsByTagName('h2');
 var mrcList = $id.getElementsByTagName('div');
 titleList[titleList.length-1].style.border = 'none';
 for(var i=0;i<titleList.length;i++)
 {   
  titleList[i].onclick = function()
  {
   for(var a=0;a<mrcList.length;a++)
   {
    mrcList[a].style.display = 'none';
   }
   if(this.nextSibling.nodeType=='3')
   {
    this.nextSibling.nextSibling.style.display = '';
   }else
   {
    this.nextSibling.style.display = '';
   }
  }
 }
}
window.onload = function(){ flexMenu('box')}
// ]]></script>
<div id="box">
<h2 class="title">模板无忧</h2>
<div class="mrc"><a href="http://www.cnblogs.com/"> 网站首页</a></div>
<h2 class="title">网页殊效</h2>
<div class="mrc" style="display: none;"><a href="http://www.cnblogs.com/">网页殊效</a></div>
<h2 class="title">源码下载</h2>
<div class="mrc" style="display: none;"><a href="http://www.cnblogs.com/">源代码下载</a></div>
</div>