首先晒出封装好的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":"我的优惠券" } ]
效果图
