自制jQuery导航栏 (纵向的)

demo下载:  http://download.youkuaiyun.com/source/3012514

//调用

<script language="JavaScript">
<!--
    $(function(){
        var urlNavigate =new BindNavigate("urlList");
        urlNavigate.bind();
    });
//-->
</script>

//脚本

var Navigate={};

function BindNavigate(className)
{
	this.className = className;
	this.bind = function(){
		//隐藏超链接
		$("."+className).find("a").each(function(){
			$(this).addClass("nav_sonItem").addClass("nav_up");
			$(this).hide();
		});
		//将text转成按钮
		$("."+className).find("li").each(function(){
			var title=$(this).attr("text");
			var btn=$("<a class='nav_up nav_top' href='###'>"+title+"</a>");
			$(this).prepend(btn); //添加标题
			$(this).append("<div class='clear'></div>"); //去除浮动
			$(btn).toggle(function(){	//标题点击事件
				if($(this).eq("a:not(:first)").length>0)
				{
					$(this).eq("a:not(:first)").show();
					$(this).removeClass("nav_up").addClass("nav_down");
				}
			},function(){
				if($(this).eq("a:not(:first)").length>0)
				{
					$(this).eq("a:not(:first)").hide();
					$(this).addClass("nav_up").removeClass("nav_down");
				}
			});
		});
	};
}

转载于:https://www.cnblogs.com/delicious28/archive/2011/02/06/1949502.html