Js实现的折叠菜单，展开收缩，来自163网盘网站

发布时间：2018-09-04 19:33:28 所属栏目：政策来源：站长网

导读：Js实现的折叠菜单，展开收缩，来自163网盘网站，设计挺漂亮的网站竖向菜单，点击大分类后，小分类展开，在网上经常见到的一种菜单效果，相信你也会喜欢。示例： htmlheadtitle折叠菜单，浏览文件夹/titlestylehtml,body{height:100%; text-align:center;

　　Js实现的折叠菜单，展开收缩，来自163网盘网站，设计挺漂亮的网站竖向菜单，点击大分类后，小分类展开，在网上经常见到的一种菜单效果，相信你也会喜欢。

　　示例：

<html> <head> <title>折叠菜单，浏览文件夹</title> <style> html,body{height:100%; text-align:center; font-size:12px; color:#404040} .wp_sidebar{background:fff;width:230px; margin:30px auto; text-align:left;} .mo_wp{ background:#F7F7F7; margin-bottom:4px;border:1px solid #dfdfdf;} .mo_title{ clear:both; color:#000; padding:6px 8px 6px 12px; cursor:pointer; } .btn_all_tiny_img{background-image:url(/uploads/allimg/1106/all_toolbar_tiny.gif); background-repeat:no-repeat;} .mo_title_l{ display:block; margin-right:12px; width:auto;} .mo_title_r1,.mo_title_r2{ display:block; float:right; margin-left:-12px; height:12px; width:12px; background-position:0px 0px;} .mo_title_r2{background-position:-16px 0px;} .tbl_inner_title,.mo_title{ background-repeat:repeat-x; background-image:url(/uploads/allimg/1106/rx_2.gif); background-position:0 bottom; background-color:#fafafa;} .mo_con{ clear:both; padding:8px 12px;color:#CC3300;} </style> <script type="text/javascript" language="javascript"> var webPan={ first:function(x){return x.firstChild||x.firstChild.nextSibling}, next:function(x){ do{x=x.nextSibling}while(x&&x.nodeType!=1); return x; }, set:function(x,_1,_2,_3){ this.next(x).style.display = _1; this.first(x).className = this.first(x).className.replace(_2,_3); }, init:function(){ var _this=this,_0='mo_title_r1',_1='mo_title_r2'; function $(o){return document.getElementById(o)}; this.win=[]; for (var i=0;i<arguments.length;++i ) { var _i=this.first($(arguments[i])); this.set(_i,'none',_0,_1); _i.onclick=function (){ if(_this.prev&&_this.prev!=this){_this.set(_this.prev,'none',_0,_1)}; var _2=_this.first(this).className.indexOf(_1) == 0?['',_1,_0]:['none',_0,_1]; _this.set(this,_2[0],_2[1],_2[2]); _this.prev=this; } } } }; window.onload = function (){ webPan.init('win1','win2','win3','win4') } </script> </head> <body> <div class="wp_sidebar"> <div class="mo_wp" id="win1" > <div class="mo_title"> <div class="mo_title_r1 btn_all_tiny_img"></div> <div class="mo_title_l">空间信息</div> </div> <div class="mo_con">这家伙很懒，什么都没有留下。</div> </div> <div class="mo_wp" id="win2" > <div class="mo_title"> <div class="mo_title_r1 btn_all_tiny_img"></div> <div class="mo_title_l">个人信息</div> </div> <div class="mo_con">这家伙很懒，什么都没有留下。</div> </div> <div class="mo_wp" id="win3" > <div class="mo_title"> <div class="mo_title_r1 btn_all_tiny_img"></div> <div class="mo_title_l">系统广播</div> </div> <div class="mo_con">12:00 停机维护</div> </div> <div class="mo_wp" id="win4" > <div class="mo_title"> <div class="mo_title_r1 btn_all_tiny_img"></div> <div class="mo_title_l">版权声明</div> </div> <div class="mo_con">WebPan 1.0</div> </div> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：51站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!