吳瑕

在Web前端開(kāi)發(fā)中，很多菜單通常以層次結(jié)構(gòu)列表形式展示，如目錄導(dǎo)航菜單、多級(jí)菜單等。因這種層次結(jié)構(gòu)列表里內(nèi)容相互嵌套，具有較復(fù)雜的包含關(guān)系，所以網(wǎng)頁(yè)前端開(kāi)發(fā)者常常青睞于將這種菜單設(shè)計(jì)成類似樹(shù)形動(dòng)畫的效果，可以讓用戶有更好的交互體驗(yàn)。本文介紹網(wǎng)頁(yè)常見(jiàn)的目錄導(dǎo)航菜單（如圖1、2、3）設(shè)計(jì)成樹(shù)形動(dòng)畫的兩種實(shí)現(xiàn)方式，即：Javascript編碼與jQuery編碼。

1.2使用Javascript編碼實(shí)現(xiàn)

使用Javascript直接設(shè)計(jì)樹(shù)形動(dòng)畫的思路是：

1）遍歷li元素集合，不管當(dāng)前l(fā)i元素處于什么層次位置，檢測(cè)該li元素是否包含ul元素，如果有，則設(shè)置臨時(shí)標(biāo)識(shí)變量b為true，否則設(shè)置變量b為false。

2）如果b為true，設(shè)置當(dāng)前l(fā)i元素的樣式（如鼠標(biāo)樣式、列表項(xiàng)目符號(hào)），獲取該li元素包含的第一個(gè)ul元素并隱藏，再為該li元素綁定click事件處理函數(shù)。在click事件處理函數(shù)中，以u(píng)l元素是否顯示為條件，分別隱藏或顯示ul元素，同時(shí)動(dòng)態(tài)修改當(dāng)前l(fā)i元素的樣式。

2.小結(jié)

在Web前端開(kāi)發(fā)中以Javascript與iQuery兩種方式通常都可以很好的實(shí)現(xiàn)相同效果的網(wǎng)頁(yè)交互、動(dòng)畫、特效等，因iQuery對(duì)各種瀏覽器事件、DOM對(duì)象等都進(jìn)行了大量封裝，讓開(kāi)發(fā)者不用考慮各種瀏覽器兼容問(wèn)題，所以在編碼時(shí)可以事半功倍。但是jQuery是一個(gè)特化的框架，代碼執(zhí)行速度比原生Javascript慢，而且它不是一個(gè)完整的解決方案，所以在很多底層開(kāi)發(fā)時(shí)仍然離不開(kāi)Javascript，因而在實(shí)際開(kāi)發(fā)中應(yīng)根據(jù)具體隋況而定。