使用jquery 簡單實作下拉選單_jquery

Jquery 是一個輕量的框架，個人認為非常好用，今天就寫一個非常簡單的例子，實現下拉式選單功能；

首先一定要在頁數引用jquery.js  版本不限 ；

接下來把=====================html貼出來：

複製程式碼 程式碼如下:

 
       

 
           
• 系統管理
 
           
• 乾管所勤
 
           
• 保護站
 
           
• 木材檢驗
 
           
• 森林管護
 
       

 
   

 

 
   

 
       
• 出勤管理
 
       
• 巡視管理
 
       
• 現場取證
 
       
• 問題處置
 
   

 

 

 
   

 
       
• 位置監測
 
       
• 檢定管理
 
   

 

 

 
   

 
       
• 出勤管理
 
       
• 監管資訊
 
   

 

 

 
   

 
       
• 出勤管理
 
       
• 監管資訊
 
   

 

 

 
   

 
       
• 權限管理
 
       
• 裝置管理
 
   

 

 

===========================css樣式：

複製程式碼 程式碼如下:

/**ヘッダーメニュー**/
.header_menu{
    フロート:右; 
    幅: 50%; 
    高さ: 100%; 
    カーソル: ポインタ; 
}
.header_menu ul{
    リストスタイル: なし; 
    高さ: 100%; 
}
.header_menu ul li{
    フロート: 右; 
    幅: 20%; 
    色:白; 
    フォントサイズ:14px; 
    パディングトップ: 55px; 
    フォントの太さ: 太字; 
}
.display{
    表示: なし。 
}
.display ul{
    リストスタイル: なし; 
    幅: 100ピクセル; 
}
.display ul li{
    パディングトップ:10px; 
    パディングボトム: 5px; 
    パディング左:5px; 
    カーソル: ポインタ; 
    フォントサイズ: 14px; 
}
.movediv{
    位置: 固定; 
    左: 0px; 
    上:0px; 
    フォントサイズ: 14px; 
    白; 
    ボーダー:1px ソリッドホワイト; 
}
.redcolor{
    #a0c9e6; 
}

=======================js スクリプト

复制代码代码如下:

$(function() {
    // 菜单绑定イベント
    initMenuListener(); 
    // 下拉菜单绑定イベント
    initSubMenuHover(); 
    // 下拉菜单颜色改变
    initSubMenuLiHover(); 
}); 
/**
* ヘッダー メニュー バインディング スライド イベント
​*/
function 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 は获取高さであり、内边距離を含みます、高さは获取高さでもあり、文本の高さだけを含みません
        $(“#” HideDivId).show(); 
        $(“#” HideDivId).css(“left”, left); 
        $(“#” hideDivId).css(“top”, 上部の高さ); 
    }, function() {
        // 将原来的菜单隐藏
        $(“.display”).hide(); 
    }); 
}
/**
* ドロップダウン メニュー バインディング イベント
​*/
function initSubMenuHover() {
    $(“.display”).hover(function() {
        $(this).show(); 
    }, function() {
        $(this).hide(); 
    }); 
}
/**
* ドロップダウンメニューの色を変更
​*/
function initSubMenuLiHover() {
    $(“.redli”).hover(function() {
        $(this).addClass(“redcolor”); 
    }, function() {
        $(this).removeClass(“redcolor”); 
    }); 
}

效果如下：

小さな使用に伴う自己改良の下、自由な展開の下で自分のアイテムに使用できるようになり、ここでは単にポイント形式を作成しました。