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>
