首先晒出封装好的dropdown.js

(function($){

    'use strict';//使用严格模式

    //构造函数形式

    function Dropdown(elem,options){

        //保存到this中才能公用

        this.elem=elem;

        this.options=options;

        this.timer=null;

        this.list=this.elem.find(".dropdown-list");//下拉列表是需要动画的部分

        this.activeClass=options.active+"-active";

        this._init();//初始化

    }

    Dropdown.defaults={

        event:"hover",//还有click

        css3:false,

        js:false,

        animation:"fade",

        delay:0,//默认无延迟

        active:"dropdown"

    };

    //约定俗称：内部使用的可以以_开头

    Dropdown.prototype._init=function(){

        var self=this;

        //指定动画模式

        this.list.showHide(this.options);

        //绑定事件

        this.list.on("show shown hide hidden",function(e){

            //console.log(e.type);

            //消息转发

            self.elem.trigger("dropdown-"+e.type);//触发事件

        });

        if(this.options.event==="click"){    

            this.elem.click(function(e){

                self.show();

                e.stopPropagation();//阻止冒泡，否则点击下拉时也会冒泡到document，导致显示后立刻隐藏的效果

            });

            //点击空白处消失

            $(document).click($.proxy(this.hide,this));

        }else{//容错机制，写错默认也是hover

            this.elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));

        }

    };

    Dropdown.prototype.show=function(){

        var self=this;

        if(this.options.delay){

            //如果有延迟

            this.timer=setTimeout(function(){

                _show();

            },this.options.delay);

        }else{

            //没有延迟

            _show();

        }

        function _show(){

            self.elem.addClass(self.activeClass);

            self.list.showHide("show");//show

        }

    }

    Dropdown.prototype.hide=function(){

        if(this.options.delay){

            clearTimeout(this.timer);

        }

        this.elem.removeClass(this.activeClass);

        this.list.showHide("hide");//show

    }

    //插件形式

    $.fn.extend({

        dropdown:function(opt){

            return this.each(function(){

                var ui=$(this);

                var dropdown=ui.data("dropdown");

                //opt是参数对象

                var options=$.extend({},Dropdown.defaults,ui.data(),typeof opt==="object"&&opt);

                //单例：一个DOM元素对应一个实例，如果已经存在则不需要反复实例化

                if(!dropdown){

                    dropdown=new Dropdown(ui,options);

                    ui.data("dropdown",dropdown);

                }

                //opt是show或者hide

                if(typeof dropdown[opt]==="function"){

                    dropdown[opt]();

                }

            });

        }

    });

})(jQuery);

//为了防止$符发生冲突，将jQuery作为参数传入，则$符作为内部变量，不会发生冲突

使用方法：

在页面中引入base.css   https://www.cnblogs.com/chenyingying0/p/12363689.html

transition.js   https://www.cnblogs.com/chenyingying0/p/12363649.html

showhide.js https://www.cnblogs.com/chenyingying0/p/12363707.html

dropdown.js  （上面刚贴的）

然后上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dropdown</title>

    <link rel="stylesheet" href="../css/base.css">

    <style>

        /*分离出dropdown公共样式*/

        .dropdown{

            position: relative;

        }

        .dropdown-toggle{

            position: relative;

            z-index:2;

        }

        .dropdown-arrow{

            display: inline-block;

            vertical-align: middle;

            background-repeat: no-repeat;

        }

        .dropdown-list{

            display: none;

            position: absolute;

            z-index:1;

        }

        .dropdown-left{

            left:0;

            right:auto;

        }

        .dropdown-right{

            right:0;

            left:auto;

        }

        /*分离出nav的dropdown独有样式*/

        .menu .dropdown-toggle{

            display: block;

            padding:0 16px 0 12px;

            border-right:1px solid #f3f5f7;

            border-left:1px solid #f3f5f7;

        }

        .menu .dropdown-arrow{

            margin-left:8px;

            vertical-align: middle;

        }

        .menu .dropdown-list{

            border:1px solid #cdd0d4;

            background-color: #fff;

            top:100%;

            overflow:hidden;/*避免容器还没显示时，文字提前显示*/

        }

        .menu-item{

            height:30px;

            line-height:30px;

            padding:0 12px;

            white-space: nowrap;

        }

        /*鼠标移入*/

        .menu-item:hover{

            background-color: #f3f5f7;

        }

        .menu-active .dropdown-toggle{

            color:#f01414;

            background-color:#fff;

            border-color:#cdd0d4;

        }

        @font-face {

          font-family: "iconfont";

          src: url('../font/iconfont.eot?t=1582272973653'); /* IE9 */

          src: url('../font/iconfont.eot?t=1582272973653#iefix') format('embedded-opentype'), /* IE6-IE8 */

          url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMgAAsAAAAABxAAAALRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBbIFbATYCJAMMCwgABCAFhG0HQRssBsgekiSCCCFEuNlXEQBAPHzt93ru7n5ElURBCR2BR5Bliy51gKpGVNYCG9XxbMSbd+4zPSCMOgTu9Sct57/89MAB8gDg+U2hMJtwk9PLaOlpn+dyehPoQO6qb1lua9nY4/lRL8A4oEDHGrQICiQgT0F2R6CWvJtA25Ik3NGapi7gonAGBeKOLPLApRRRFCnfFOotM4t4zVEzPUnf8Cr+fvy3M1xIapkz8vi1agso+zX5VZFnqjVDIUG9nAvSPDI2AwpxtTVznr2QOHttk0N/eV0R0lLxqiJWmZb6Qf94iahzartgPc0mfvn7coJfFXdIIIM6Co4BTlN2+u4sWkuugcK7XzPWn03hfqHrBFzKHnD9N/PZ4F7P9ffhg8fc2Vs3r7PmkLOEZ8HuotvxoydrARZ8tPZoJtANHTbfLfNt8m1kb0r92n/hum2PejfY0bcssN9up2U/iqlrDF15exnd72H3eLIT35f1BRwJ/n/uTXKjpdzjBd/wyYYk987lMN+Ix9xY6SQYA1D9yB9yEQDktVT2m3/jYS3h8+ig6F+zU8BP8933OFL9KHBL8yaMMVH5U9VgQzG1jjUXXeWrbF+2/QZdCVrXRsUJjP2ZbpnBtYSmWY6kYRFZ0zJZ2M2o6diNuqYDaNukdn7HBGUvSgsbLRKEoZdI+j4jG/pOFvY3aub+om4Y9mg7G/4rdqyG7FZJEc+QBY5PQ1kgBvbszC2p70CiqfG0qI35HkRtchymp6RV87XIQHSJMbYJMYMxDDElOqwh+yFNI9BKiYIEliIxZi1ITcVtD0oRiA7cHEEhPAaxgMZNg2QCwoDD1oxb7fMdEJFJw6M9ooZiD4SykTuH0qVIA8hakwGJHuUemwmiDAyDQRhF6KAa0g3RaAjI2t5NgQiYFNKElFWBVLcZRk0p21v0/9sGbc7KOVLkKJrXiTlpChLymJJ5jVeCMoMREwAAAAA=') format('woff2'),

          url('../font/iconfont.woff?t=1582272973653') format('woff'),

          url('../font/iconfont.ttf?t=1582272973653') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

          url('../font/iconfont.svg?t=1582272973653#iconfont') format('svg'); /* iOS 4.1- */

        }

        .iconfont {

          font-family: "iconfont" !important;

          font-size: 14px;

          font-style: normal;/*i标签自带斜体效果*/

          -webkit-font-smoothing: antialiased;/*在webkit内核和火狐浏览器中，抗锯齿*/

          -moz-osx-font-smoothing: grayscale;

        }

        [class*="-active"] .dropdown-arrow{

            -webkit-transform:rotate(180deg);

            -moz-transform:rotate(180deg);

            -ms-transform:rotate(180deg);

            -o-transform:rotate(180deg);

            transform:rotate(180deg);

        }

        /*提取出过渡样式，可公用*/

        .transition{

            -webkit-transition:all .5s;

            -moz-transition:all .5s;

            -ms-transition:all .5s;

            -o-transition:all .5s;

            transition:all .5s;

        }

        /*showhide组件的样式*/

        .fadeOut{

            opacity: 0;

            visibility: hidden;

        }

        /*收缩样式*/

        .slideUpDownCollapse{

            height:0 !important;/*避免因为优先级不够而无法生效*/

            padding-top:0 !important;

            padding-bottom:0 !important;

        }

        .slideLeftRightCollapse{

            width:0 !important;/*避免因为优先级不够而无法生效*/

            padding-left:0 !important;

            padding-right:0 !important;

        }

        .dropdown-loading{

            width:32px;

            height:32px;

            background:url(../img/loading.gif) no-repeat;

            margin:20px;

        }

    </style>

</head>

<body>

    <!-- 用data-load来确定数据源 -->

    <div class="menu dropdown fl" data-active="menu" data-load="dropdown.json">

        <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow iconfont transition"></i></a>

        <ul class="dropdown-list dropdown-left">

            <li class="dropdown-loading"></li>

        </ul>

    </div>

    <div class="menu dropdown fl" data-active="menu">

        <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow iconfont transition"></i></a>

        <ul class="dropdown-list dropdown-left">

            <li class="menu-item"><a href="#">已买到的宝贝</a></li>

            <li class="menu-item"><a href="#">我的足迹</a></li>

        </ul>

    </div>

    <button class="show-btn">点我显示</button>

    <button class="hide-btn">点我隐藏</button>

    <script src="../js/jquery.js"></script>

    <script src="../js/transition.js"></script>

    <script src="../js/showhide.js"></script>

    <script src="../js/dropdown.js"></script>

    <script>

        //绑定事件 显示之前加载数据

        $(".dropdown").on("dropdown-show",function(e){

            var ui=$(this);

            var dataLoad=ui.data("load");

            if(!dataLoad) return;

            //只请求一次即可

            if(!ui.data("loaded")){

                var list=ui.find(".dropdown-list");

                var html="";

                //$.getJSON(文件,回调) jquery封装的获取json数据的方法

                setTimeout(function(){

                    $.getJSON(dataLoad,function(data){

                        //console.log(data);

                        for(var i=0;i<data.length;i++){

                            console.log(data[i]);

                            html+='<li class="menu-item"><a href="'+data[i]["url"]+'">'+data[i]["name"]+'</a></li>';

                        }

                        //console.log(html);

                        list.html(html);

                        ui.data("loaded",true);

                    });

                },500);//模拟线上延迟

            }

        });

        //指定参数

        $(".dropdown").dropdown({

            event:"hover",

            css3:true,

            js:true,

            animation:"slideUpDown"

        });

        //通过按钮也可以控制下拉菜单的显示隐藏

        $(".show-btn").on("click",function(){

            $(".dropdown").dropdown("show");

        });

        $(".hide-btn").on("click",function(){

            $(".dropdown").dropdown("hide");

        });

    </script>

</body>

</html>

这块区域是按需加载的过程，设置的是页面第一次加载时，下拉菜单的项没有加载

等到用户将鼠标移入时，通过ajax请求获取数据加载进来

这是dropdown.json数据的结构：

[

    {

        "url":"#",

        "name":"已买到的宝贝"

    },

    {

        "url":"#",

        "name":"我的足迹"

    },

    {

        "url":"#",

        "name":"我的优惠券"

    }

]

效果图

最新文章

  1. CodeMirror简介
  2. Oracle插入日期格式出现 ORA-01843: not a valid month的解决办法
  3. ios app 企业帐号发布，在浏览器中直接点击链接下载安装
  4. jQuery源码分析系列：Callback深入
  5. Azure SQL Data Warehouse
  6. Unity 延迟执行一段代码的较为优雅的方式
  7. Window memcache 使用
  8. ipod中，写计时器倒计时界面倒计时没有更改
  9. 将查询字符串解析转换为泛型List的名值集合.
  10. Winform调用QQ发信息并且开机启动 (开源)
  11. c#中如何将一个string数组转换为int数组
  12. Jquery的普通事件和on的委托事件小案例
  13. mysql备份恢复数据库据/表
  14. DOS批处理命令-注释
  15. 【转】Bluetooth数据包捕获
  16. javascript 高级程序设计学习笔记（面向对象的程序设计)继承
  17. 为什么Redis比Memcached易
  18. HTML 5 Web 存储、应用程序缓存、Web Workers
  19. [WPF]如何调试Data Binding
  20. 【C/C++】C++11 Lambda

热门文章

  1. 我的开源权限管理项目BeCore (基于.net core开发)
  2. java"小心机"(1)【资源彩蛋!】
  3. 巨坑练习题！！！—— Car的旅行线路
  4. Educational Codeforces Round 80 (Rated for Div. 2) E. Messenger Simulator
  5. SpringBoot简单实现登录功能
  6. JS-02-js的变量
  7. RoBERTa模型总结
  8. 004-OSI参考模型和分层思想
  9. 最简单的基于FFMPEG+SDL的视频播放器：拆分-解码器和播放器
  10. 视觉slam十四讲课后习题ch3--5题