一个简洁型伸缩菜单

 1 <p>一个简洁型伸缩菜单</p>
 2 <style><!--
 3 *{margin:0; padding:0;}
 4 body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;}
 5 #box{width:700px; border:1px solid #ccc;}
 6 .title{ font-size:16px;padding-left:30px; height:30px; border-bottom:1px solid #fff; background:gray; line-height:20px; color:#fff; cursor:pointer;}
 7 .mrc{ padding:15px; height:150px;}
 8 --></style>
 9 <script type="text/javascript">// <![CDATA[
10 function flexMenu(id)
11 {
12  var $id = document.getElementById(id);
13  var titleList = $id.getElementsByTagName('h2');
14  var mrcList = $id.getElementsByTagName('div');
15  titleList[titleList.length-1].style.border = 'none';
16  for(var i=0;i<titleList.length;i++)
17  {   
18   titleList[i].onclick = function()
19   {
20    for(var a=0;a<mrcList.length;a++)
21    {
22     mrcList[a].style.display = 'none';
23    }
24    if(this.nextSibling.nodeType=='3')
25    {
26     this.nextSibling.nextSibling.style.display = '';
27    }else
28    {
29     this.nextSibling.style.display = '';
30    }
31   }
32  }
33 }
34 window.onload = function(){ flexMenu('box')}
35 // ]]></script>
36 <div id="box">
37 <h2 class="title">模板无忧</h2>
38 <div class="mrc"><a href="http://www.cnblogs.com/"> 网站首页</a></div>
39 <h2 class="title">网页殊效</h2>
40 <div class="mrc" style="display: none;"><a href="http://www.cnblogs.com/">网页殊效</a></div>
41 <h2 class="title">源码下载</h2>
42 <div class="mrc" style="display: none;"><a href="http://www.cnblogs.com/">源代码下载</a></div>
43 </div>