在开发过程中，很多地方都使用了联动菜单。以前每次遇到都是重写，代码复用率很低。前几天，他们遇到了联动菜单的问题。总结后发现可以开发一个联动菜单的功能，以后他们想用的时候会方便很多。项目中的每个页面都有对jQuery的引用，开发一个jQuery联动菜单插件，说出来就可以启动。下面和大家分享一下。

我使用的jQuery插件。

(function($){ $ . fn . casmenu=function(argvs){//你的代码} })(jQuery)；其中jquery传入jQuery对象，扩展前需要引用。扩展中还使用了jQuery的缩写$形式。

$.fn引用jquery的命名空间，添加到fn的方法和属性对jquery的每个实例都有效。请看下面jquery源代码的第101行：

jquery . fn=jquery . prototype={ 0.}比如后面要开发的$ .fn.cashmenu()，定义之后，这个方法可以用在下面的jquery对象中。

还有一种扩展方法：

$.extend({ funname : function(){//您的代码}，})；这种扩展方法与上面的不同。如果你把这个类作为一个类比，那么。extend方法相当于类中的静态方法，而上述方法相当于非静态方法，只有在有对象的情况下才能使用。简单的理解如下：

//$.fn.casemenu扩展方法，只能使用$('#mydiv ')。有jquery对象时为casmenu()；//$.extend({})，可以直接使用$。add(2，3)；设计思路从分层菜单的数据保存方法入手。请看以下数据：

Var levels={ //内容中有引号，所以必须使用单引号，外引号必须是双引号。//name=value 1:{退出应用程序： 'code1003 '，登录界面3360' code1004 '，跳转到个人数据界面3360' code1005 '。}，23360 {退出应用：{ App 1:'gameid1 '，App 2:'gameid2 '，App 3:'gameid3 '，App 4:'gameid4 '，App 53360' Gameid5 '，}，跳转到个人数据界面：{主界面： '主界面'，}，{应用1:{中间字段： '

有规律的水平。如果某个级别的项目有下一级菜单，它就有下一级项目的名称，就像级别[1][“退出应用程序”]有下一级菜单一样，那么就有级别[2][“退出应用程序”][“应用1”]。如果还有较低级别的菜单，就像级别[2]['退出应用程序']。这样就实现了无限联动菜单，不同的联动菜单只需要修改菜单配置文件。

但是这样做还有一个遗憾，就是如果2级[2]有两个同名的子项，两个子项都有下级菜单，下级菜单的内容不一样，就会出现问题。因此，在设置时，下级菜单中的项目应该有不同的名称，这里要注意。就这一点而言，简单、易懂、充分。

代码还使用了$。在代码中扩展以扩展默认配置。

还有一点需要注意的是，在链接的时候，facts的菜单值会放入一个属性隐藏的输入中，每一级之间的值会默认用逗号来划分，这样就可以很容易的得到链接菜单中所有项目的值。

if(typeof(AI.opts.saveinput)！=' undefined '(ai . opts . save input=ai . opts . save input . tostring())！=' '){ $(' input type=' hidden ' value=' name=' ' ai . opts . save input ' ' id=' ' ai . opts . save input ' '/')。appendTo($(“body”))；}

（函数($){ //配置var AI={ opts : {保存输入： '跳转代码'，//是否将结果保存至输入电平：{}，ulObj:{}，//保存生成好的保险商实验所列表长度：0,//层级菜单的层级divide: '，'，//默认各个层级菜单之间的分隔符} };$ .fn。casmenu=function(opts){ ai。opts=$ .扩展(AI.opts，opts)；if((ai。选择。长度=对象。按键(ai。选择。级别).长度)=0){抛出'水平arr不能为空；返回；} var _ levels=ai。选择。级别；if(_ levels[1]==未定义){ throw '菜单一级不能为空；返回；} var _ levels _ 1=_ levels[1]；if(typeof(AI.opts.saveinput)！=' undefined '(ai。选择。保存输入=ai。选择。保存输入。tostring())！=' '){ $('输入类型=' hidden '值=' name=' ai。选择。保存输入“id=”ai。选择。保存输入' '/').appendTo($(“body”)；} ai。选择。ulobj[' level _ 1 ']=' select class=' casmenu ' level=' 1 '；AI.opts.ulObj['level_1']='选项值='null '请选择/option '；$('#' AI.opts.saveinput).val(' null ')；for(var I in _ levels _ 1){ ai。选择。ulobj[' level _ 1 ']='选项名称='我'值=' ' _ levels _ 1[I]' ' ' I '/选项；} ai。选择。ulobj[' level _ 1 ']='/select '；$(AI.opts.ulObj['level_1']).appendTo(这个);$(“正文”).on('change '，').casmenu '，function(){ var level=$(this).attr(' level ')；如果（级别AI.opts.length)返回；水平；//移除当前触发菜单之后的菜单for(var num=level；num=ai。选择。长度；num ){ $(' .casmenu[level=' num ']').移除();} //设置投入的值，级联菜单的值var _ val=for(var val=1；val=ai。选择。长度；val){ var _ _ val=$(' select[level=' val ']')；if(_ val。长度=0)继续；_ val=_ _ val。val()。ai。选择。划分；} $('#' AI.opts.saveinput).val(_val.substr(0，_val。长度-1))；//级别对象中不存在下一级别目录(ai的类型。选择。levels[level])==' undefined ')返回；//获取下一级别目录的键值，值不存在的话返回var name=$(this).查找(“option:selected”).attr(' name ')；(ai的类型。选择。levels[level][name])==' undefined ')返回；(ai的类型。选择。ulobj[' level _ ' level])==' undefined ' | |类型的(ai。选择。ulobj[' level _ ' level][name])==' undefined '){ if(类型为(ai。选择。ulobj[' level _ ' level])==' undefined ')ai。选择。ulobj[' level _ ' level]={ }；ai。选择。ulobj[' level _ ' level][name]=' select class=' casmenu ' level=' level ' '；ai。选择。Ulobj[' level _ ' level][name]='选项值='null '请选择/option '；var等级信息=ai。选择。levels[level][name]；用于(级别信息中的var I){ ai。选择。ulobj[' level _ ' level][name]=' option name=' I ' value=' level info[I]' ' ' I '/option '；} ai。选择。ulobj[' level _ ' level][name]='/select '；} $(ai。选择。ulobj[' level _ ' level][name]).appendo($(this).parent())；var _ val=for(var val=1；val=ai。选择。长度；val){ var _ _ val=$(' select[level=' val ']')；if(_ val。长度=0)继续；_ val=_ _ val。val()。ai。选择。划分；} $('#' AI.opts.saveinput).val(_val.substr(0，_val。长度-1))；});} })(jQuery)；运行效果：

以上就是为大家分享的jQuery插件实现多级联动菜单效果，希望对大家的学习有所帮助。