jQuery實作可收縮展開的級聯選單實例程式碼_javascript技巧

如果用純JavaScript程式碼而不使用框架的話，那麼做一個級聯選單也許是一件讓人生畏的事情，但有了框架，這件事情就很容易了，這就是框架的好處，極大地提高了開發效率，並且更可靠和易於維護。使用jQuery來實現級聯選單的一般步驟如下：

•1.首先使用

和
• 創建一個級聯菜單 
  

複製代碼 程式碼如下:

BR>        "http://www.3.org/ html4/loose.dtd">


 
 
 
 

•2.寫JavaScript程式碼，控制級聯選單的收縮

複製代碼 代碼如下:

代碼如下:



代碼如下:



代碼如下:



代碼如下:


//需要編寫程式碼，在頁面裝載時，給所有的主選單添加onclick的事件
//確保主選單點擊時可以顯示或隱藏子選單
//註冊頁面裝載時執行的方法

$(document).ready(function() {
    //這裡需要先找到所有的主選單
    //接著為所有的主選單註冊點選事件

    //找出ul中的節點    var as = $("ul > a");    var as = $("ul > a");   as.click(function() {         //這裡需要找到目前ul中的li，然後讓li顯示出來        //取得目前被點選的a節點   所有節點的所有li兄弟字節點

        var lis = aNode.nextAll("li");

        //讓子節點顯示或隱藏
        //讓子節點顯示或隱藏
);
});


•建立css文件，來控制標籤的顯示效果

複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製碼> 程式碼如下:/*如何讓所有的li都不顯示小圓點，可以使用css的標籤選擇器*/li {    list-style : none; /*使li前面的小圓點消失*/    margin-left: 18px; /*讓子選單向右移動一段距離，達到縮排的效果*/    display: none; / *讓所有的子選單先隱藏*/}a{  text-decoration: none; /*讓連結的底線消失*/}
jQuery帶來的方便：

1.找被點擊的選單時，只要一個$(this)就可以實現

2.節點的顯示與隱藏，只用一條語句：toggle()就可以，而且還可以在陣列上實現所有節點都具有這種功能。

3.找出某個標籤下所有的某種標籤：$("ul > a")