jQuery插件實現多級聯動菜單效果_jquery

我用的jQuery插件方式

其中jQuery傳入的是jquery對象，需要在擴展之前引用。在擴展中同樣使用jQuery的短格式$。

$.fn是指jquery的命名空間，加在fn上的方法及屬性，會對jquery實例每一個有效，看看下面的jquery源碼101行左右：

比如說后面要開發的$.fn.casmenu()，定義之后，在后面的jquery對象都可以使用該方法。

這里還有一種擴展的方法：

這種擴展方法和上面的是有區別的，要是拿類做類比的話，$.extend這種方法相當于類中的靜態方法，上面的一種方式相當于非靜態方法，必須有對象才可以使用。簡單的理解，是下面這樣的：

設計思路
首先是層級菜單的數據保存方式，看看下面的數據：

對象levels中的直接鍵值1、2、3代表菜單的層級，沒有就不用些，每一項name=>value代表select中option的名稱和value。

層級有規律，某一層級中的某一項要是有下一級菜單，在下一層及有該項的名稱，就像levels[1]['退出應用']在有下級菜單，就有levels[2]['退出應用']，要是繼續有下級菜單，就像levels[2]['退出應用']['應用1']，會在下一層及中繼續有levels[3]['應用1']。這樣一來，就實現了無限級聯動菜單，不同的聯動菜單只需要修改菜單配置文件就可以了。

但是這么做又有一個遺憾，就是如果level2[2]中的子項有兩個名稱相同的，都有下級菜單，而且下級菜單內容還不一樣，就會有問題，因此在設置的時候，有下級菜單的項要取不同的名稱，這里要注意下。就目前這種來說，簡單，好理解，也夠用了。

代碼實現
在代碼中也用到了$.extend，用來擴展默認配置。

還有一個點要注意，在聯動的時候會將實事的菜單值放入一個屬性為hidden的input中，用默認逗號分割每個層級之間的值，可以很輕松的獲取到聯動菜單所有項的值

運行效果：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com