jQuery制作菜單

	

		
			賬戶管理
			

				
密碼修改
				
信息修改
			
		
		
			文章管理
			

				
博文管理
				
隨筆管理
			
		
		興趣設置
		
	

   用javascript實現(xiàn)菜單點擊的代碼如下：

function init()
{
	var obj = document.getElementById("menu");
	var nodes = obj.children[0].children;
	for(var i = 0; i < nodes.length; ++i){
		var node = nodes[i].children[0];
		if(node.tagName === "A"){
			if(nodes[i].children.length > 1){
				var tag = nodes[i].children[1];
				node.onclick = function(tag)
				{
					return function(){
						if(tag.style.display === "block")
							refresh();
						else {
							refresh();
							tag.style.display = "block";
						}
					}
				}(tag);
			}
		}
	}
}

function refresh()
{
	var obj = document.getElementById("menu");
	var nodes = obj.children[0].children;
	
	var i;
	for(i = 0; i < nodes.length; ++i) {
		var temp =  nodes[i].children[1];
		if(temp && temp.tagName === "UL")
			temp.style.display = "none";
		}
}

    用jQuery實現(xiàn)點擊一級菜單時二級菜單的收縮

function init()
{
	$(".level1 > a").click(function(){
		$(this).next().show().parent().siblings().children("a").next().hide();
	});
}

    以上兩種手段比較，不難發(fā)現(xiàn)，相比javascript復雜的邏輯實現(xiàn)，使用jQuery實現(xiàn)菜單的點擊更為簡潔有效。

附1：菜單點擊效果圖：

附2：菜單css樣式代碼：

{
	text-decoration:none;
}

ul, li
{
	list-style-type:none;
	margin:0px;
	padding:0px;
}

.menu
{
	width:150px;
}

.menu ul
{
	border-width:0px 1px 1px;
	border-style:solid;
	border-color:#C4D5DF;
}

.menu ul li a
{
	display:block;
	height:28px;
	line-height:28px;
	background:#EBF3F8;
	font-size:12px;
	color:#5893B7;
	text-indent:14px;
	border-top:1px solid #C4D5DF;
}

.menu ul li a:hover
{
	color:#bd0a01;
	text-decoration:underline;
}

.menu ul li ul
{
	display:none;
	border:0px solid;
}

.menu ul li ul li a
{
	background:#FFFFFF;	
	text-indent:28px;
}

.menu ul li ul li a:hover
{
	color:green;
}