• 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');
    });
  • 相关阅读:
    Linux 命令[5]:rmdir
    Linux 命令[4]:pwd,date
    Linux 命令[0]:起航
    Linux 命令[3]:cd
    vscode插件
    Object.freeze()
    插件
    前端开发调试线上代码
    前端自动化测试是浪费时间还是节约时间?
    踩坑之用lrz插件进行图片压缩
  • 原文地址:https://www.cnblogs.com/by-dxm/p/6396239.html
Copyright © 2020-2023  润新知