最近由于项目需要一个简单的多级下拉菜单菜单但是由于业务和样式上的要求，为了简洁，在网上找了很多导航菜单控件都不大适合，所以突发奇想自己写个吧~该动手就动手啊~
HTML部分

<h2> 
SuperFish</h2> 
<ul class="nav" hid="root"> 
<li><a href="javascript:void(0)" testid="aa">一级li 1</a> 
<ul> 
<li><a href="javascript:void(0)" testid="bb">二级 li 1</a></li> 
<li><a href="javascript:void(0)" testid="cc">二级 li 2</a> 
<ul> 
<li><a href="javascript:void(0)" testid="dd">三级 li 1</a></li> 
<li><a href="javascript:void(0)" testid="ee">三级 li 2</a></li> 
<li><a href="javascript:void(0)" testid="ff">三级 li 3</a></li> 
<li><a href="javascript:void(0)" testid="gg">三级 li 4</a></li> 
<li><a href="javascript:void(0)" testid="hh">三级 li 5</a></li> 
<li><a href="javascript:void(0)" testid="ii">三级 li 6</a> 
<ul> 
<li><a href="javascript:void(0)" testid="jj">四级 li 1</a></li> 
<li><a href="javascript:void(0)" testid="kk">四级 li 2</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="javascript:void(0)" testid="ll">二级 li 3</a> 
<ul> 
<li><a href="javascript:void(0)" testid="mm">三级 li 6</a></li> 
<li><a href="javascript:void(0)" testid="nn">三级 li 7</a></li> 
<li><a href="javascript:void(0)" testid="oo">三级 li 8</a></li> 
<li><a href="javascript:void(0)" testid="pp">三级 li 9</a></li> 
<li><a href="javascript:void(0)" testid="qq">三级 li 10</a></li> 
</ul> 
</li> 
<li><a href="javascript:void(0)" testid="rr">二级 li 4</a> 
<ul> 
<li><a href="javascript:void(0)" testid="ss">三级 li 11</a></li> 
<li><a href="javascript:void(0)" testid="tt">三级 li 12</a></li> 
<li><a href="javascript:void(0)" testid="uu">三级 li 13</a></li> 
<li><a href="javascript:void(0)" testid="vv">三级 li 14</a></li> 
<li><a href="javascript:void(0)" testid="ww">三级 li 15</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="javascript:void(0)" testid="xx">一级li 2</a> 
<ul> 
<li><a href="javascript:void(0)" testid="ss">二级 li 11</a></li> 
</ul> 
</li> 
</ul> 

Javascript部分

<script language="javascript" type="text/javascript"> 
var navigationBar = function () { 
//使用时将testid属性换成href属性即可 
var currentUrlHref = "jj"; 
var root = $("ul[hid='root']"); 
$(root).find(">li").attr("first_level", true); 
$(root).find(">li>a").addClass("nav_first_style"); 
//递归向下查找可展开元素并且绑定toggle展开事件 
var searchChildren = function (root) { 
if (root.find(">li").length > 0) { 
$(root).addClass("ul_style"); 
var liChildren = root.find(">li"); 
$(liChildren).each(function (idx, item) { 
searchChildren($(item)); 
}) 
} else if (root.find(">ul").length > 0) { 
$(root).addClass("li_style"); 
if ($(root).attr("first_level") != true.toString()) { 
$(root).find(">a").addClass("li_style_a"); 
} 
var aLink = $(root).find(">a"); 
//初始装载的时候判断当前url是不是和导航栏中的东西匹配 
if (currentUrlHref == $(aLink).attr("testid")) { 
findInitPosition(aLink); 
} 
$(aLink).toggle(function () { 
$(this).addClass("li_style_a_selected"); 
$(this).parent().find(">ul").show("fast"); 
//隐藏非一级节点下的所有兄弟元素 
if ($(this).parent().attr("first_level") != true.toString()) { 
$(this).parent().siblings().find(">a").removeClass("li_style_a_selected"); 
$(this).parent().siblings().each(function (idx, item) { 
removeClassAndHide(item); 
}) 
} else { 
$(this).addClass("nav_first_style_selected"); 
$(this).removeClass("li_style_a_selected"); 
$(this).parent().siblings().find(">a").removeClass("nav_first_style_selected"); 
$(this).parent().siblings().each(function (idx, item) { 
removeClassAndHide(item); 
}) 
} 
}, function () { 
if ($(this).parent().attr("first_level") == true.toString()) { 
$(this).addClass("nav_first_style_selected"); 
$(this).parent().siblings().find(">a").removeClass("nav_first_style_selected"); 
} 
removeClassAndHide($(this).parent()); 
}) 
var ulChildren = root.find(">ul"); 
$(ulChildren).each(function (idx, item) { 
$(item).hide(); 
searchChildren($(item)); 
}); 
} else { 
if ($(root).attr("first_level") != true.toString()) { 
$(root).find(">a").addClass("li_style_a"); 
} 
$(root).addClass("li_style"); 
$(root).click(function () { 
if ($(root).attr("first_level") != true.toString()) { 
$(this).find(">a").addClass("li_style_a_selected"); 
$(this).siblings().find(">a").removeClass("li_style_a_selected"); 
$(this).siblings().each(function (idx, item) { 
removeClassAndHide(item); 
addFirstLevelClass(item); 
}) 
} else { 
$(this).find(">a").addClass("nav_first_style_selected"); 
$(this).find(">a").removeClass("li_style_a_selected"); 
$(this).siblings().find(">a").removeClass("nav_first_style_selected"); 
removeClassAndHide(this); 
} 
}) 
if (currentUrlHref == $(root).find(">a").attr("testid")) { 
findInitPosition($(root).find(">a")); 
} 
} 
} 
//递归查找初始位置 
var findInitPosition = function (aLink) { 
var currentLi = $(aLink).parent(); 
if ($(currentLi).parent().parent().find(">a").length > 0) { 
findInitPosition($(currentLi).parent().parent().find(">a")); 
} 
if ($(currentLi).find(">ul").length > 0) { 
$(currentLi).find(">ul").show("fast"); 
} 
if ($(currentLi).attr("first_level") != true.toString()) { 
$(currentLi).find(">a").addClass("li_style_a_selected"); 
} else { 
$(currentLi).find(">a").addClass("nav_first_style_selected"); 
} 
} 
//递归向下删除所有子节点的选中样式 
var removeClassAndHide = function (li) { 
if ($(li).attr("first_level") != true.toString()) { 
$(li).find(">a").removeClass("li_style_a_selected"); 
$(li).find(">ul").hide("fast"); 
if ($(li).find(">ul").length > 0) { 
$(li).find(">ul>li").each(function (idx, item) { 
removeClassAndHide(item); 
}); 
} 
} else if ($(li).attr("first_level") == true.toString()) { 
$(li).find(">ul").hide("fast"); 
$(li).find(">ul>li").each(function (idx, item) { 
removeClassAndHide(item); 
}) 
} else { 
$(li).find(">ul").show("fast"); 
$(li).find(">ul>li").each(function (idx, item) { 
removeClassAndHide(item); 
}) 
} 
} 
//递归向上添加第一层节点样式 
var addFirstLevelClass = function (li) { 
if ($(li).attr("first_level") != true.toString()) { 
addFirstLevelClass($(li).parent().parent()); 
} else { 
if (!$(li).find(">a").hasClass("nav_first_style_selected")) { 
$(li).find(">a").addClass("nav_first_style_selected"); 
$(li).siblings().find(">a").removeClass("nav_first_style_selected"); 
} 
} 
} 
//创建导航 
var createNav = function () { 
searchChildren(root); 
} 
createNav(); 
} 
var initNav = new navigationBar(); 
</script> 

不过暂时还没有封装成类似jquery的写法，其实还可以继续封成一个控件~

运算符&&的三个不同层次
运算符可以从三个不同的层次进行理解。第一层理解当操作数都是布尔值时，&&对两个值执行布尔与(AND)操作。x==0&&y==0//只有当x和y都是0时，才返回true

有关于JS辅助函数inherit()的问题
最近在阅读《JavaScript权威指南》（第六版）在第六章P122有这么一段代码：//返回一个继承自原型对象proto的属性的新对象//这里可以用到ES5的Object.create()

有关于JS构造函数的重载和工厂方法
写在前面有时候我们希望对象的初始化有多种方式。比如通过元素组成的数组来初始化一个Set对象，而不是通过传入构造函数的参数列表来初始化它重