如果用純JavaScript程式碼而不使用框架的話,那麼做一個級聯選單也許是一件讓人生畏的事情,但有了框架,這件事情就很容易了,這就是框架的好處,極大地提高了開發效率,並且更可靠和易於維護。使用jQuery來實現級聯選單的一般步驟如下:
•1.首先使用
BR> "http://www.3.org/ html4/loose.dtd">
itcast.cn的JQuery應用範例:彈出式選單
•2.寫JavaScript程式碼,控制級聯選單的收縮
代碼如下:
代碼如下:
代碼如下:
代碼如下:
//需要編寫程式碼,在頁面裝載時,給所有的主選單添加onclick的事件
//確保主選單點擊時可以顯示或隱藏子選單
//註冊頁面裝載時執行的方法
$(document).ready(function() {
//這裡需要先找到所有的主選單
//接著為所有的主選單註冊點選事件
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")