jquery實作動態選單的實例碼_jquery

jquery實作動態選單的方式跟jquery彈出視窗的方式差不多，都是採用JavaScript操作css的方式。

其具體步驟可分為以下幾步：

•建立一個含有要表達的選單的html頁面

複製程式碼 程式碼如下:

程式碼如下:






 
   
   
   
   
   
 
 
   

  "#">我是選單1
       
• 我是子選單1

       
• 我是子選單2

     
• 我是子選單2

     
   

        我是選單2
       

我是子選單3我是子選單4

   

   

  •建立css檔案來控制選單的顯示

複製程式碼


程式碼如下:



程式碼如下:



程式碼如下:

/*讓所有的li都不顯示小圓點，可以使用css標籤選擇器*/li{    /*使list前的小圓點消失*/    list-style: none;

    /*縮排效果*/

    margin-left: 18px;
   /*隱藏選單*/
  *文字的顯示方式*/
    text-decoration: none;
}


•建立一個JavaScript檔案來控制選單的顯示









複製程式碼


程式碼如下:

/*  * 點選主選單，子選單顯示；再點選主選單，子選單隱藏 * 需要編寫程式碼，讓主選單在裝載時加入onclick事件，使得點選主選單可以顯示子選單 * 註冊頁面載入時執行的方法 */$(document).ready (function(){   //var uls = $("ul");   //找到ul下的a節點   var as = $("ul > a");   as .click(function(){       //先找到目前的ul中的li，然後讓li顯示出來       //取得目前已點選的ul節點       //取得目前被點選的ul節點  >       //找到所有被點選ul節點下的li節點       var lis = aNode.nextAll("li");     slow");   });});