封裝dropdown模塊（使用到之前寫好的動畫組件，封裝下拉菜單）

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/22/12346959.html
-Advertisement-
Play Games

用 showhide 改寫dropdown 模塊： 1.首先在 css中新增動畫相關樣式 /*showhide組件的樣式*/ .fadeOut{ opacity: 0; visibility: hidden; } /*收縮樣式*/ .slideUpDownCollapse{ height:0 !im ...


用 showhide 改寫dropdown 模塊：

1.首先在 css中新增動畫相關樣式

        /*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;
        }

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
        })
    }

    //預設參數
    var defaults={
        css3:false,
        js:false,
        animation:"fade"
    };

    //插件形式
    $.fn.extend({
        dropdown:function(options){
            return this.each(function(){//遍曆數組
                var options=$.extend({},defaults,options);
                dropdown(this,options);
            });
        }
    });

})(jQuery);
//為了防止$符發生衝突，將jQuery作為參數傳入，則$符作為內部變數，不會發生衝突

調用時

    <script>
        //沒傳參數時使用預設參數
        $(".dropdown").dropdown();

        //指定參數
        $(".dropdown").dropdown({
            css3:true,
            js:true,
            animation:"slideUpDown"    
        });
    </script>

接下來，用構造函數的形式來改寫dropdown模塊

(function($){
    'use strict';//使用嚴格模式

    //構造函數形式
    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會指向調用該函數的元素，也就是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);
        // 因為匿名函數會形成局部作用域，查找不到self會沿著作用域鏈去上一級尋找，找到dropdown
        
        //改變this指向的第二種方法
        //當執行hover方法的時候，$.proxy()方法就會執行，$調用的，也就是jquery調用的
        //$.proxy() 接受一個已有的函數，並返回一個帶特定上下文的新的函數
        //這裡上下文指的是show函數所在對象名稱，也就是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方法寫在原型上，就不會每次實例化時重覆執行
    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(){//遍曆數組
                //console.log($(this).data());//{active: "menu"}
                //將html中寫入的data-active屬性也加入對象合併
                var options=$.extend({},Dropdown.defaults,$(this).data(),options);
                new Dropdown(this,options);
            });
        }
    });

})(jQuery);
//為了防止$符發生衝突，將jQuery作為參數傳入，則$符作為內部變數，不會發生衝突

註意點：

this.elem.hover(this.show,this.hide); 這種寫法是錯誤的

外面的this指向Dropdown實例，但是hover事件里的this會指向調用該函數的元素，也就是elem
因此需要改變this的指向

改變this指向的第一種方法

        var self=this;    
        this.elem.hover(function(){
            self.show();
        },function(){
            self.hide();
        });

註意不能寫成：this.elem.hover(self.show,self.hide);

必須要有匿名函數包裹

因為匿名函數會形成局部作用域，查找不到self會沿著作用域鏈去上一級尋找，找到dropdown

改變this指向的第二種方法

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

當執行hover方法的時候，$.proxy()方法就會執行，$調用的，也就是jquery調用的
$.proxy() 接受一個已有的函數，並返回一個帶特定上下文的新的函數
這裡上下文指的是show函數所在對象名稱，也就是Dropdown，所以改變了this的指向

 

觸發方式和延遲顯示

要讓用戶可以選擇觸發方式：比如hover，比如click

因此要在default 屬性中新增 event

dropdown.js

(function($){
    'use strict';//使用嚴格模式

    //構造函數形式
    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);
//為了防止$符發生衝突，將jQuery作為參數傳入，則$符作為內部變數，不會發生衝突

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內核和火狐瀏覽器中，抗鋸齒*/
          -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;
        }
    </style>
</head>
<body>
    <div class="menu dropdown fl" data-active="menu">
        <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow iconfont transition">&#xe642;</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">&#xe642;</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">&#xe642;</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>
        //指定參數
        $(".dropdown").dropdown({
            event:"click",
            css3:true,
            js:true,
            animation:"slideUpDown",
            active:"menu"
        });
    </script>
</body>
</html>

此時有個問題：就是當 event 設置為hover，然後存在多個下拉列表

滑鼠從1開始快速移動到3，則1,2,3都會被觸發事件

假設只是想觸發1,3事件，快速經過中觸發了2事件，是一種對性能的浪費

這裡引入延遲顯示的機制

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.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({
        dropd
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • android的APT技術
    轉載請標明出處：https:////www.cnblogs.com/tangZH/p/12343786.html APT 是Annotation Processing Tool 的簡稱。 它是註解處理器，在處理Annotation時可以根據源文件中的Annotation生成額外的源文件和其它的文件（ ...
  • 深入理解 Android 中的各種 Context
    前言 網上關於 Context 的文章也已經有不少了，比如值得參考的有： "Android Context完全解析，你所不知道的Context的各種細節" "Android Context 到底是什麼？" 但看了一下，發現還有值得討論的地方，比如這個等式： Context個數 = Service 個 ...
  • Xcode-一些小問題（配置包路徑，配置文件路徑。。。）
    1.真機配置包路徑 /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport 2.配置文件路徑 ~/Library/MobileDevice/Provisioning Profiles 3 ...
  • 11種常用css樣式學習大結局滾動條與顯示隱藏
    滾動條常見樣式展示 overflow-x: hidden;/*是否對內容的左/右邊緣進行裁剪*/overflow-y: hidden;/*是否對內容的上/下邊緣進行裁剪*/overflow:scroll;/*左右滾動*/overflow: hidden;/*截取*/overflow: auto;/*... ...
  • ES6 - 基礎學習(6: 對象擴展
    對象對於JavaScript至關重要，在ES6中對象又加了很多新特性。 對象字面量：屬性的簡潔表示法 ES6允許對象的屬性直接寫變數，這時候屬性名是變數名，屬性值是變數值。 let attr1 = "ES6"; let attr2 = 'testDemo'; let testObj = {attr1 ...
  • 89組合margin、padding、float、clear問題
    有關浮動和清浮動問題，個人理解是float:left或者float:right的css樣式打破div標準流獨占一行的傳統，脫離了文檔流,所造成的浮動頁面影響類似"捆橡皮筋，當你把橡皮都拿走了，橡皮筋就回縮了",這時候，你要做的就是考慮如何有效的防止橡皮筋回縮，就是防止我們佈局的div盒子回縮,那清浮... ...
  • absoulue與relative配合定位盒子居中問題
    如何通過absoulue與relative配合把一個盒子或者是把2個div塊同時放到頁面中央部分？定位完成後為什麼又需要margin-left與margin-top各往回走50%的長度，別忘記用z-index定位高度，請看下麵代碼展示: ...
  • 方法中this指向的問題
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <button class="btn">按鈕</button> <script src="../js/j ...
一周排行
    -Advertisement-
    Play Games
  • .NET 6 Entity Framework Core Db First（1） 創建模型
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 資料庫升級PostgreSql+Garnet
    目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊，後續可能不再更新Garne ...
  • 如何基於surging架設流媒體視頻推流（視頻講解）
    C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了，幾乎是無縫銜接，很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高，我只要會調用方法就行。這個系統交付之後不會有太多問題，更多應該是做小需求，有大的開發任務應該也是第二期的事，嗯？怎麼感覺我變成運維了？而 ...
  • EAV模型（實體-屬性-值）的設計和低代碼的處理方案（2）--數據的查詢處理
    我在隨筆《EAV模型（實體-屬性-值）的設計和低代碼的處理方案（1）》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼（或者說無代碼）的一些實現思路，在本篇隨筆中，我們來分析一下這種針對通用業務，且只需定義就能構建業務模塊存儲和界面的解決方案，其中的數據查詢處理的操作。 ...
  • C# 程式集、模塊和類型概念及關係
    對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1，這將啟用NTP伺服器功 ...
  • Django信號與擴展：深入理解與實踐
    title: Django信號與擴展：深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分：Django信號基礎 Djan ...
  • Django3.2安裝源碼xadmin2步驟以及遇到的問題
    使用xadmin2遇到的問題&解決 環境配置： 使用的模塊版本： 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 原創->CommonsCollections1-DefaultMap鏈
    今天我打算整點兒不一樣的內容，通過之前學習的TransformerMap和LazyMap鏈，想搞點不一樣的，所以我關註了另外一條鏈DefaultedMap鏈，主要調用鏈為： 調用鏈詳細描述： ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 05-應用級開發者 AI 時代破局點
    後端應用級開發者該如何擁抱 AI GC？就是在這樣的一個大的浪潮下，我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型，跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好，或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • Java面試題：讓依賴註入變得簡單，面對@Autowired和@Resource，該如何選擇？
    @Autowired是Spring框架提供的註解，@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配，而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean，而@Resourc... ...
所有分類