jQuery自定义插件规范

    <ul class="list">
        <li>导航列表
            <ul class="nav">
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
            </ul>
        </li>
        <li>导航列表
            <ul class="nav">
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
            </ul>
        </li>
    </ul>

全局函数：

;(function($){
    //全局
    $.extend({
        'nav':function(){
            $('.nav').css({
                'list-style':'none',
                'margin':0,
                'padding':0,
                'display':'none'
            });
            
            $('.nav').parent().hover(function(){
                $(this).find('.nav').slideDown('normal');
            },function(){
                $(this).find('.nav').stop().slideUp('normal');
            });
        }
    });
    
    //局部
    $.fn.extend({
        'nav':function(color){
            $(this).find('.nav').css({
                'list-style':'none',
                'margin':0,
                'padding':0,
                'display':'none',
                'color':color
            });
            
            $(this).find('.nav').parent().hover(function(){
                $(this).find('.nav').slideDown('normal');
            },function(){
                $(this).find('.nav').stop().slideUp('normal');
            });
            
            return this;
        }
    });
})(jQuery);

执行：

$(function(){
    //全局
    $.nav();
    //局部
    $('.list').eq(1).nav('red');
});

jQuery自定义插件规范

推荐阅读