Heim >Web-Frontend >js-Tutorial >用jQuery扩展自写的 UI导航_jquery

用jQuery扩展自写的 UI导航_jquery

WBOY
WBOYOriginal
2016-05-16 18:36:281505Durchsuche
复制代码 代码如下:

(function($){
    $.navs=function(){
        return $('#top_menu_bar > li').each(function(){
            $(this).hover(
                function(){
                    $(this).find('ul:eq(0)').show();
                },
                function(){
                    $(this).find('ul:eq(0)').hide();
                }
            );
        });
    };
})(jQuery);

上面是直接定义属性。下面是种常见的方法:
复制代码 代码如下:

jQuery.extend({
    navs:function(){
        return $('#top_menu_bar > li').each(function(){
            $(this).hover(
                function(){
                    $(this).find('ul:eq(0)').show();
                },
                function(){
                    $(this).find('ul:eq(0)').hide();
                }
            );
        });
    }
});

调用测试下:
$.navs();
两年前的野心今天终于实现了(噢,这是导航,不是页签(tabs)),小有成就感一把!
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn