Heim > Web-Frontend > js-Tutorial > Hauptteil

Einfache Implementierung eines Dropdown-Menüs mit jquery_jquery

WBOY
Freigeben: 2016-05-16 16:20:09
Original
1025 Leute haben es durchsucht

Jquery ist ein leichtes Framework, das meiner Meinung nach sehr einfach zu verwenden ist. Heute werde ich ein sehr einfaches Beispiel zur Implementierung der Dropdown-Menüfunktion schreiben

Stellen Sie zunächst sicher, dass Sie jquery.js auf der Seite angeben. Die Version ist nicht begrenzt

Als nächstes posten Sie das =====================html:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                       


============================== CSS-Stil:




Code kopieren


Der Code lautet wie folgt:

/**頭部菜單**/ 
.header_menu{ 
    浮動:右; 
    寬度:50%; 
    高度:100%; 
    遊標:指針; 

.header_menu ul{ 
    清單樣式:無; 
    高度:100%; 

.header_menu ul li{ 
    浮動:右; 
    寬度:20%; 
    顏色:白色; 
    字體大小:14px; 
    上方填入:55px; 
    字體粗細:粗體; 

.顯示{ 
    顯示:無; 

.顯示 ul{ 
    清單樣式:無; 
    寬度:100px; 

.display ul li{ 
    上方填入:10px; 
    底部填充:5px; 
    左內邊距:5px; 
    遊標:指針; 
    字體大小:14px; 

.movediv{ 
    位置:固定; 
    左:0px; 
    上方:0px; 
    字體大小:14px; 
    白色的; 
    邊框:1px純白; 

.redcolor{ 
    #a0c9e6; 

========================js腳本

複製程式碼以下程式碼:

$(函數() { 
    // 選單綁定事件
    初始化選單監聽器(); 
    // 下拉式選單綁定事件
    initSubMenuHover(); 
    // 下拉式選單顏色改變
    initSubMenuLiHover(); 
}); 
/**
 * 頭部選單綁定滑過事件
 */ 
函數 initMenuListener() { 
    $(“.menuli”).hover(function() { 
        var hideDivId = $(this).attr(“id”) “_div”; 
        // 取得選單的位置
        var left = $(this).offset().left; 
        var top = $(this).offset().top; 
        var height = $(this).outerHeight();//outerHeight是取得高度,包括內邊距,height也是取得高度,不過只包含文字高度
        $(「#」 hideDivId).show(); 
        $(「#」 hideDivId).css(「左」, 左); 
        $(“#” hideDivId).css(“頂部”, 頂部高度); 
    }, 函數() { 
        // 隱藏原來的選單
        $(“.display”).hide(); 
    }); 

/**
 * 下拉式選單綁定事件
 */ 
函數 initSubMenuHover() { 
    $(“.display”).hover(function() { 
        $(this).show(); 
    }, 函數() { 
        $(this).hide(); 
    }); 

/**
 *  下拉式選單改變顏色
 */ 
函數 initSubMenuLiHover() { 
    $(“.redli”).hover(function() { 
        $(this).addClass(“redcolor”); 
    }, 函數() { 
        $(this).removeClass(“redcolor”); 
    }); 

效果如下:

小夥伴們使用的時候自己美化下,自由擴充下就可以佔用自己的專案中了,我在這裡簡單做了點樣式吧。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!