首页 > 其他 > 详细

一个简洁型伸缩菜单

时间:2016-04-26 19:11:47      阅读:124      评论:0      收藏:0      [点我收藏+]
 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>

 

一个简洁型伸缩菜单

原文:http://www.cnblogs.com/soulmate/p/5435838.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!