|
用 showhide 改寫dropdown 模塊： 1.首先在 css中新增動畫相關樣式 /*showhide組件的樣式*/ .fadeOut{ opacity: 0; visibility: hidden; } /*收縮樣式*/ .slideUpDownCollapse{ height:0 !important;/*避免因為優(yōu)先級不夠而無法生效*/ padding-top:0 !important; padding-bottom:0 !important; } .slideLeftRightCollapse{ width:0 !important;/*避免因為優(yōu)先級不夠而無法生效*/ padding-left:0 !important; padding-right:0 !important; } js 中引入 showhide 腳本 <script src="../js/transition.js"></script>
<script src="../js/showhide.js"></script>
修改dropdown.js 腳本 (function($){ 'use strict';//使用嚴格模式 function dropdown(elem,options){ var elem=$(elem); var list=elem.find(".dropdown-list");//下拉列表是需要動畫的部分 var activeClass=elem.data("active")+"-active"; //指定動畫模式 list.showHide(options); elem.hover(function(){ elem.addClass(activeClass); list.showHide("show");//show },function(){ elem.removeClass(activeClass); list.showHide("hide");//hide }) } //默認參數(shù) var defaults={ css3:false, js:false, animation:"fade" }; //插件形式 $.fn.extend({ dropdown:function(options){ return this.each(function(){//遍歷數(shù)組 var options=$.extend({},defaults,options); dropdown(this,options); }); } }); })(jQuery); //為了防止$符發(fā)生沖突，將jQuery作為參數(shù)傳入，則$符作為內(nèi)部變量，不會發(fā)生沖突 調(diào)用時 <script>
//沒傳參數(shù)時使用默認參數(shù)
$(".dropdown").dropdown();
//指定參數(shù)
$(".dropdown").dropdown({
css3:true,
js:true,
animation:"slideUpDown"
});
</script>
接下來，用構造函數(shù)的形式來改寫dropdown模塊 (function($){ 'use strict';//使用嚴格模式 //構造函數(shù)形式 function Dropdown(elem,options){ this.elem=$(elem); this.list=this.elem.find(".dropdown-list");//下拉列表是需要動畫的部分 this.activeClass=options.active+"-active"; //指定動畫模式 this.list.showHide(options); //外面的this指向Dropdown實例，但是hover事件里的this會指向調(diào)用該函數(shù)的元素，也就是elem //因此需要改變this的指向 //this.elem.hover(this.show,this.hide); //改變this指向的第一種方法 // var self=this; // this.elem.hover(function(){ // self.show(); // },function(){ // self.hide(); // }); //注意此處不可以直接寫：this.elem.hover(self.show,self.hide); // 因為匿名函數(shù)會形成局部作用域，查找不到self會沿著作用域鏈去上一級尋找，找到dropdown //改變this指向的第二種方法 //當執(zhí)行hover方法的時候，$.proxy()方法就會執(zhí)行，$調(diào)用的，也就是jquery調(diào)用的 //$.proxy() 接受一個已有的函數(shù)，并返回一個帶特定上下文的新的函數(shù) //這里上下文指的是show函數(shù)所在對象名稱，也就是Dropdown，所以改變了this的指向 this.elem.hover($.proxy(this.show,this),$.proxy(this.hide,this)); } //使用這種方式跟原型有個相同的好處：就是只會生成一次 //不會每次實例化就再次生成 //原型主要用于方法 Dropdown.defaults={ css3:false, js:false, animation:"fade", active:"dropdown" }; //將show和hide方法寫在原型上，就不會每次實例化時重復執(zhí)行 Dropdown.prototype.show=function(){ this.elem.addClass(this.activeClass); this.list.showHide("show");//show } Dropdown.prototype.hide=function(){ this.elem.removeClass(this.activeClass); this.list.showHide("hide");//show } //插件形式 $.fn.extend({ dropdown:function(opt){ return this.each(function(){//遍歷數(shù)組 //console.log($(this).data());//{active: "menu"} //將html中寫入的data-active屬性也加入對象合并 var options=$.extend({},Dropdown.defaults,$(this).data(),options); new Dropdown(this,options); }); } }); })(jQuery); //為了防止$符發(fā)生沖突，將jQuery作為參數(shù)傳入，則$符作為內(nèi)部變量，不會發(fā)生沖突 注意點： this.elem.hover(this.show,this.hide); 這種寫法是錯誤的 外面的this指向Dropdown實例，但是hover事件里的this會指向調(diào)用該函數(shù)的元素，也就是elem 改變this指向的第一種方法 var self=this; this.elem.hover(function(){ self.show(); },function(){ self.hide(); }); 注意不能寫成：this.elem.hover(self.show,self.hide); 必須要有匿名函數(shù)包裹 因為匿名函數(shù)會形成局部作用域，查找不到self會沿著作用域鏈去上一級尋找，找到dropdown 改變this指向的第二種方法 this.elem.hover($.proxy(this.show,this),$.proxy(this.hide,this)); 當執(zhí)行hover方法的時候，$.proxy()方法就會執(zhí)行，$調(diào)用的，也就是jquery調(diào)用的
觸發(fā)方式和延遲顯示 要讓用戶可以選擇觸發(fā)方式：比如hover，比如click 因此要在default 屬性中新增 event dropdown.js (function($){ 'use strict';//使用嚴格模式 //構造函數(shù)形式 function Dropdown(elem,options){ this.elem=$(elem); this.list=this.elem.find(".dropdown-list");//下拉列表是需要動畫的部分 this.activeClass=options.active+"-active"; //指定動畫模式 this.list.showHide(options); var self=this; if(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.defaults={ event:"hover",//還有click css3:false, js:false, animation:"fade", active:"dropdown" }; Dropdown.prototype.show=function(){ this.elem.addClass(this.activeClass); this.list.showHide("show");//show } Dropdown.prototype.hide=function(){ this.elem.removeClass(this.activeClass); this.list.showHide("hide");//show } //插件形式 $.fn.extend({ dropdown:function(opt){ return this.each(function(){ var options=$.extend({},Dropdown.defaults,$(this).data(),opt); new Dropdown(this,options); }); } }); })(jQuery); //為了防止$符發(fā)生沖突，將jQuery作為參數(shù)傳入，則$符作為內(nèi)部變量，不會發(fā)生沖突 dropdown.html <!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內(nèi)核和火狐瀏覽器中，抗鋸齒*/ -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;/*避免因為優(yōu)先級不夠而無法生效*/ padding-top:0 !important; padding-bottom:0 !important; } .slideLeftRightCollapse{ width:0 !important;/*避免因為優(yōu)先級不夠而無法生效*/ padding-left:0 !important; padding-right:0 !important; } </style> </head> <body> <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> <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> <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> <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> //指定參數(shù) $(".dropdown").dropdown({ event:"click", css3:true, js:true, animation:"slideUpDown", active:"menu" }); </script> </body> </html> 此時有個問題：就是當 event 設置為hover，然后存在多個下拉列表 鼠標從1開始快速移動到3，則1,2,3都會被觸發(fā)事件 假設只是想觸發(fā)1,3事件，快速經(jīng)過中觸發(fā)了2事件，是一種對性能的浪費 這里引入延遲顯示的機制 dropdown.js (function($){ 'use strict';//使用嚴格模式 //構造函數(shù)形式 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.list.showHide(options); var self=this; if(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.defaults={ event:"hover",//還有click css3:false, js:false, animation:"fade", delay:0,//默認無延遲 active:"dropdown" }; 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 options=$.extend({},Dropdown.defaults,$(this).data(),opt); new Dropdown(this,options); }); } }); })(jQuery); //為了防止$符發(fā)生沖突，將jQuery作為參數(shù)傳入，則$符作為內(nèi)部變量，不會發(fā)生沖突 頁面調(diào)用 <script>
//指定參數(shù)
$(".dropdown").dropdown({
event:"hover",
css3:true,
js:true,
animation:"slideUpDown",
delay:500,
active:"menu"
});
</script>
用構造函數(shù)的形式重寫dropdown模塊-發(fā)送消息、暴露方法以及單例 dropdown.js (function($){ 'use strict';//使用嚴格模式 //構造函數(shù)形式 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" }; //約定俗稱：內(nèi)部使用的可以以_開頭 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); //消息轉發(fā) self.elem.trigger("dropdown-"+e.type);//觸發(fā)事件 }); 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是參數(shù)對象 var options=$.extend({},Dropdown.defaults,ui.data(),typeof opt==="object"&&opt); //單例：一個DOM元素對應一個實例，如果已經(jīng)存在則不需要反復實例化 if(!dropdown){ dropdown=new Dropdown(ui,options); ui.data("dropdown",dropdown); } //opt是show或者hide if(typeof dropdown[opt]==="function"){ dropdown[opt](); } }); } }); })(jQuery); //為了防止$符發(fā)生沖突，將jQuery作為參數(shù)傳入，則$符作為內(nèi)部變量，不會發(fā)生沖突 下拉菜單的按需顯示 當下拉列表里內(nèi)容很多時，如果首次加載全部，會影響用戶體驗，因此需要按需加載 將需要的數(shù)據(jù)放到json文件中，需要時再去加載 json中一定要加雙引號 dropdown.json [ { "url":"#", "name":"已買到的寶貝" }, { "url":"#", "name":"我的足跡" }, { "url":"#", "name":"我的優(yōu)惠券" } ] dropdown.html <!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內(nèi)核和火狐瀏覽器中，抗鋸齒*/ -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;/*避免因為優(yōu)先級不夠而無法生效*/ padding-top:0 !important; padding-bottom:0 !important; } .slideLeftRightCollapse{ width:0 !important;/*避免因為優(yōu)先級不夠而無法生效*/ 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來確定數(shù)據(jù)源 --> <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> //綁定事件 顯示之前加載數(shù)據(jù) $(".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(文件,回調(diào)) jquery封裝的獲取json數(shù)據(jù)的方法 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);//模擬線上延遲 } }); //指定參數(shù) $(".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> 效果圖
接下來就按照封裝好的下拉菜單，來改寫首頁中的下拉菜單 index.html <!DOCTYPE html> <html lang="zh-CN"><!-- 設置簡體中文 --> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/common.css"> <!-- css一般放在DOM加載前，防止DOM裸奔 --> </head> <body> <!-- 導航 --> <div class="nav-site"> <div class="container"> <ul class="fl"> <li class="fl"><a href="javascript:;" class="nav-site-login">親，請登錄</a></li> <li class="fl"><a href="javascript:;" class="nav-site-reg link">免費注冊</a></li> <li class="fl"><a href="#" class="nav-site-shop link">手機逛慕淘</a></li> </ul> <ul class="fr"> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link transition">我的慕淘<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> </li> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link transition">收藏夾<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> </li> <li class="fl dropdown"> <a href="javascript:;" class="nav-site-cat link">商品分類</i></a> </li> <li class="fl dropdown menu" data-active="menu" data-load="js/dropdown-seller.json"> <a href="javascript:;" class="dropdown-toggle link transition">賣家中心<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-left"> <li class="dropdown-loading"></li> <!-- <li class="menu-item"><a href="#">免費開店</a></li> <li class="menu-item"><a href="#">已賣出的寶貝</a></li> <li class="menu-item"><a href="#">出售中的寶貝</a></li> <li class="menu-item"><a href="#">賣家服務市場</a></li> <li class="menu-item"><a href="#">賣家培訓中心</a></li> <li class="menu-item"><a href="#">體驗中心</a></li> --> </ul> </li> <li class="nav-site-service fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link transition">聯(lián)系客服<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-right"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </li> </ul> </div> </div> <script src="https://cdn./jquery/1.12.4/jquery.min.js"></script> <script> //短路操作，如果cdn的jquery沒有引用成功，則會執(zhí)行后面一句，引入本地jquery //括號中的<\/script>標簽會被當做當前標簽的結束標簽，因此需要轉義 window.jQuery || document.write('<script src="js/jquery.js"><\/script>'); </script> <script src="js/transition.js"></script> <script src="js/showhide.js"></script> <script src="js/dropdown.js"></script> <script src="js/index.js"></script> </body> </html> index.js // 不要暴露在全局，使用匿名函數(shù)自執(zhí)行 (function($){ "use strict"; //綁定事件 顯示之前加載數(shù)據(jù) $(".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=""; setTimeout(function(){ $.getJSON(dataLoad,function(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>'; } list.html(html); ui.data("loaded",true); }); },500); } }); //插件形式調(diào)用 $(".dropdown").dropdown({ css3:true, js:true }); })(jQuery); common.css /*公共樣式 */ .container{ width:1200px; margin:0 auto; } .link{ color:#4d555d; } .link:hover{ color:#f01414; } .fl{ float:left; } .fr{ float:right; } /*提取出過渡樣式，可公用*/ .transition{ -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; } /*文字隱藏*/ .text-hidden{ text-indent:-9999px; overflow:hidden; } /*icon*/ @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內(nèi)核和火狐瀏覽器中，抗鋸齒*/ -moz-osx-font-smoothing: grayscale; } /*dropdown下拉組件*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:2; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; line-height:1;/*否則圖標字體會繼承父元素的line-height屬性，占據(jù)過多空間*/ } .dropdown-list{ display: none; position: absolute; z-index:1; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } [class*="-active"] .dropdown-arrow{ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } .dropdown-loading{ width:32px; height:32px; background:url(../img/loading.gif) no-repeat; margin:20px; } /*menu的dropdown獨有樣式*/ .menu .dropdown-toggle{ display: block; /*padding:0 16px 0 12px;*/ padding:0 13px 0 12px;/*減去圖標字體自帶的3px邊距*/ border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; } .menu .dropdown-arrow{ /*margin-left:8px;*/ margin-left:5px;/*減去圖標字體自帶的3px邊距*/ vertical-align: middle; } .menu .dropdown-list{ border:1px solid #cdd0d4; background-color: #fff; top:100%; } .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; } /*showhide*/ .fadeOut{ opacity: 0; visibility: hidden; } .slideUpDownCollapse{ height:0 !important;/*避免因為優(yōu)先級不夠而無法生效*/ padding-top:0 !important; padding-bottom:0 !important; } .slideLeftRightCollapse{ width:0 !important;/*避免因為優(yōu)先級不夠而無法生效*/ padding-left:0 !important; padding-right:0 !important; } 效果圖
|
|
|
