用 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。