catge在2009年12月27日 更新 “关于树状菜单的新想法，希望对前端新人有帮助“
这几天做HUB系统模板都要做到精神崩溃了，已经连续工作了48+小时，这期间遇到了不少问题，有js的，也有css的，全都一个个的自行解决。感觉自己有点事必躬亲，太过于追求完美了。做的东西不少，截取其中我认为有价值的贴出来给大家共享，今天就先谈谈树状导航菜单。
网上流行一种说法：“不会用JS写树状菜单，就不算真正懂JS”。先贴出我的菜单源码，再谈设计思路和使用方法，如果有什么BUG希望能帮忙指出
—————————————————
<html> <head> </head> <body> <ul id=”side_menu”> <li><a href=”#”>[-] 一级菜单</a> <ul> <li><a href=”#”>[-] 二级菜单</a> <ul> <li><a href=”#”>[-] 三级菜单</a></li> <li><a href=”#”>[-] 三级菜单</a></li> </ul> </li> <li><a href=”#”>[-] 二级菜单</a></li> </ul> </li> </ul> <body> <script type=”text/javascript”> /*=======================树状菜单开始====================*/ //该树状菜单由catge原创,有任何疑问和BUG请联系QQ:965496 Blog:catge.blogbus.com //该菜单支持无限级数,增加级数方法:三级时level赋值5,以后每增加一级level值增2 //该例CSS样式表已经定义到5级样式, //套用该函数只需在树状菜单根节点上使用id=”side_menu”,列表需使用UL /*===================================================*/ var level = 5; var n = level; //判断该对象是否包含于side_menu中 function isInSideMenu(obj){ if(n){ n–; if(obj.getAttribute&&obj.getAttribute(“id”)==”side_menu”){n = level;return true;} if(obj.nodeType==9){n = level;return false;}//超过当前文档树结构时返回false else{return isInSideMenu(obj.parentNode);} } n = level; return false; } //菜单折叠效果函数 function foldMenu(){ if(this.nextSibling&&this.nextSibling.nextSibling){ if(this.nextSibling.nextSibling.style.display==”block”){ this.nextSibling.nextSibling.style.display =”none”; this.innerHTML = this.innerHTML.replace(“-”,”+”); }else{ this.nextSibling.nextSibling.style.display =”block”; this.innerHTML = this.innerHTML.replace(“+”,”-”); } }else{ this.innerHTML = this.innerHTML.replace(“+”,”-”); } } //初始化树状菜单 function intSideMenu(){ var as = document.getElementsByTagName(“a”); var uls = document.getElementsByTagName(“ul”); var sidemenuUL = document.getElementById(“side_menu”); for(var i=0;i<as.length;i++){ if(isInSideMenu(as[i])){ as[i].onclick= foldMenu; as[i].innerHTML = as[i].innerHTML.replace(“-”,”+”); } }//给所有树状菜单内的a绑定foldMenu函数 for(var j=0;j<uls.length;j++){ if(isInSideMenu(uls[j]))uls[j].style.display =”none”;//初始化隐藏树状菜单 } sidemenuUL.style.display = “block”;//显示根菜单 } intSideMenu(); /*====================//树状菜单结束==========================*/ </script> </html>
—————————————————–
使用方法基本上注释里都有了，再按个人喜好给适当的ul li添加class定义css样式就行了。下面主要说下设计的思路：
1、保证用户在禁用JS时也能正常显示改菜单，所以使用的是标准的UL和DOM，已经通过测试的有IE7和FIREFOX，其他浏览器不知道。
2、intSideMenu();进行一个菜单初始化的行为。给ul id=”side_menu”里的A绑定onclick事件，同时把从最外层的挂钩UL到最里层的UL隐藏，并将[-]改成[+]做成树状效果。
3、isInSideMenu()函数判断传入的对象是否为ul id=”side_menu”包含的元素，通过这个函数过滤掉外面的干扰UL和A，这个函数很短，但很巧妙，感觉像是自己偶然的收获
。
4、foldMenu()函数对前面绑定了onclick的a进行不同的效果呈现，前面几个if就是用来区分不同的A。该函数比较依赖页面结构，所以如果要改进，这个函数应该改的比较多，不过现在看来这种效果已经足够。
PS:统一回复下问“背景音乐”类问题的朋友，过些天不忙了我会专门写个该类问题的汇总日志，看能不能也自己写个音乐播放器方便大家用。
