用 jQuery 扩展自写的 UI 导航

目前试了 jQuery 扩展的编写有两种。

(function($){
	$.fn.navs=function(){
                //找出目标对象的所有导航菜单，并给它添加导航菜单显隐轮切的事件
		return this.each(function(){
			$(this).hover(
                                //显示
				function(){
					$(this).find('ul:eq(0)').show();
				},
                                //隐藏
				function(){
					$(this).find('ul:eq(0)').hide();
				}
			);
		});
	};
})(jQuery);

上面是直接定义属性。下面是种常见的方法：

(function($){
    $.fn.extend({
	navs:function(){
                //找出目标对象的所有导航菜单，并给它添加导航菜单显隐轮切的事件
		return this.each(function(){
			$(this).hover(
                                //显示
				function(){
					$(this).find('ul:eq(0)').show();
				},
                                //隐藏
				function(){
					$(this).find('ul:eq(0)').hide();
				}
			);
		});
	}
    });
})(jQuery)

调用测试下：

$('#top_menu_bar > li').navs();

这上面导航代码来源：NeoEase。