開發中，有好多地方用到聯動菜單，以前每次遇到聯動菜單的時候都去重新寫，代碼重用率很低，前幾天又遇到聯動菜單的問題，總結了下，發現可以開發一個聯動菜單的功能，以后想用的時候就方便多了。項目中每個頁面都有引用jQuery，，開發個jQuery聯動菜單插件，說動手就動手，下面跟大家分享分享。
我用的jQuery插件方式
(function($){ $.fn.casmenu=function(argvs){ //your code }})(jQuery);其中jQuery傳入的是jquery對象，需要在擴展之前引用。在擴展中同樣使用jQuery的短格式$。
$.fn是指jquery的命名空間，加在fn上的方法及屬性，會對jquery實例每一個有效，看看下面的jquery源碼101行左右：
jQuery.fn = jQuery.prototype = { ......}比如說后面要開發的$.fn.casmenu()，定義之后，在后面的jquery對象都可以使用該方法。
這里還有一種擴展的方法：
$.extend({ funName: function(){ //your code },});這種擴展方法和上面的是有區別的，要是拿類做類比的話，$.extend這種方法相當于類中的靜態方法，上面的一種方式相當于非靜態方法，必須有對象才可以使用。簡單的理解，是下面這樣的：
//$.fn.casemenu 方式擴展的方法，必須在有jquery對象的時候才可以使用$("#mydiv").casmenu();//$.extend({}) 方式擴展的方法，可以直接使用$.add(2,3);設計思路
首先是層級菜單的數據保存方式，看看下面的數據：
var levels={ //內容中有引號，必須使用單引號，外引號必須用雙引號 //name => value 1:{ 退出應用: "code1003", 登錄界面:"code1004", 跳轉至個人資料界面:"code1005", }, 2:{ 退出應用:{ 應用1:"gameid1", 應用2:"gameid2", 應用3:"gameid3", 應用4:"gameid4", 應用5:"gameid5", }, 跳轉至個人資料界面:{ 主界面:"main interface", } }, 3:{ 應用1:{ 中級場:"12", 高級場:"13", 職業場:"14", 比賽場:"15", } }}對象levels中的直接鍵值1、2、3代表菜單的層級，沒有就不用些，每一項name=>value代表select中option的名稱和value。
層級有規律，某一層級中的某一項要是有下一級菜單，在下一層及有該項的名稱，就像levels[1]['退出應用']在有下級菜單，就有levels[2]['退出應用']，要是繼續有下級菜單，就像levels[2]['退出應用']['應用1']，會在下一層及中繼續有levels[3]['應用1']。這樣一來，就實現了無限級聯動菜單，不同的聯動菜單只需要修改菜單配置文件就可以了。
但是這么做又有一個遺憾，就是如果level2[2]中的子項有兩個名稱相同的，都有下級菜單，而且下級菜單內容還不一樣，就會有問題，因此在設置的時候，有下級菜單的項要取不同的名稱，這里要注意下。就目前這種來說，簡單，好理解，也夠用了。
代碼實現
在代碼中也用到了$.extend，用來擴展默認配置。
還有一個點要注意，在聯動的時候會將實事的菜單值放入一個屬性為hidden的input中，用默認逗號分割每個層級之間的值，可以很輕松的獲取到聯動菜單所有項的值
if(typeof(AI.opts.saveinput) != "undefined" && (AI.opts.saveinput = AI.opts.saveinput.toString()) != ''){ $("<input type='hidden' value='' name='"+AI.opts.saveinput+"' id='"+AI.opts.saveinput+"' />").appendTo($('body')); }(function($){ //配置 var AI={ opts:{ saveinput:"jumpcode", //是否將結果保存至input levels:{}, ulObj:{},//保存生成好的ul列表 length:0, //層級菜單的層級 divide:",",//默認各個層級菜單之間的分隔符 } }; $.fn.casmenu=function(opts){ AI.opts = $.extend(AI.opts, opts); if((AI.opts.length = Object.keys(AI.opts.levels).length) <= 0){ throw "levels arr must not be empty"; return; } var _levels = AI.opts.levels; if(_levels[1] == undefined){ throw "menu level 1 must not be empty"; return; } var _levels_1 = _levels[1]; if(typeof(AI.opts.saveinput) != "undefined" && (AI.opts.saveinput = AI.opts.saveinput.toString()) != ''){ $("<input type='hidden' value='' name='"+AI.opts.saveinput+"' id='"+AI.opts.saveinput+"' />").appendTo($('body')); } AI.opts.ulObj['level_1'] = '<select class="casmenu" level="1">'; AI.opts.ulObj['level_1'] += '<option value="null">請選擇</option>'; $("#"+AI.opts.saveinput).val('null'); for(var i in _levels_1){ AI.opts.ulObj['level_1'] += '<option name="'+i+'" value="'+_levels_1[i]+'">'+i+'</option>'; } AI.opts.ulObj['level_1'] += '</select>'; $(AI.opts.ulObj['level_1']).appendTo(this); $("body").on("change", ".casmenu", function(){ var level = $(this).attr("level"); if(level > AI.opts.length) return; level++; //移除當前觸發菜單之后的菜單 for(var num=level;num<=AI.opts.length;num++){ $(".casmenu[level="+num+"]").remove(); } //設置input的值，級聯菜單的值 var _val = ''; for(var val=1;val<=AI.opts.length;val++){ var __val = $("select[level="+val+"]"); if(__val.length <= 0) continue; _val += __val.val()+AI.opts.divide; } $("#"+AI.opts.saveinput).val(_val.substr(0, _val.length-1)); //levels對象中不存在下一級別目錄 if(typeof(AI.opts.levels[level]) == "undefined") return; //獲取下一級別目錄的鍵值，值不存在的話返回 var name = $(this).find("option:selected").attr("name"); if(typeof(AI.opts.levels[level][name]) == "undefined") return; if(typeof(AI.opts.ulObj['level_'+level]) == "undefined" || typeof(AI.opts.ulObj['level_'+level][name]) == "undefined"){ if(typeof(AI.opts.ulObj['level_'+level]) == "undefined") AI.opts.ulObj['level_'+level] = {}; AI.opts.ulObj['level_'+level][name] = '<select class="casmenu" level="'+level+'">'; AI.opts.ulObj['level_'+level][name] += '<option value="null">請選擇</option>'; var levelinfo = AI.opts.levels[level][name]; for(var i in levelinfo){ AI.opts.ulObj['level_'+level][name] += '<option name="'+i+'" value="'+levelinfo[i]+'" >'+i+'</option>'; } AI.opts.ulObj['level_'+level][name] += '</select>'; } $(AI.opts.ulObj['level_'+level][name]).appendTo($(this).parent()); var _val = ''; for(var val=1;val<=AI.opts.length;val++){ var __val = $("select[level="+val+"]"); if(__val.length <= 0) continue; _val += __val.val()+AI.opts.divide; } $("#"+AI.opts.saveinput).val(_val.substr(0, _val.length-1)); }); }})(jQuery);運行效果：
以上就是為大家分享的jQuery插件實現多級聯動菜單效果，希望對大家的學習有所幫助。
新聞熱點
疑難解答
