本文举例说明了json jQuery实现的无限树菜单效果代码。分享给大家参考。具体如下：

这里演示了json树形菜单和JS无级树形菜单。介绍了jQuery插件。递归实现用于获取无级树数据和生成DOM结构，可以通过在JSON数据中展开无限级来理解。

我们先来看看跑步效果的截图：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-JSON-tree-style-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 /脚本类型=' text/JAVAScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本标题js无级树树形菜单/titlestyle type='text/css ' .menuTree { margin-left :-30px；}.menuTree div { padding-left :30 px；}.menuTree div ul {溢出：隐藏；display : none height : auto }。menuTree span {显示：块；高度：25px线高：25 px左衬垫：5 px边距3 33601 px 0；光标：指针指针；边框-底部：1px实心# CCC}。menuTree span :悬停{底色： # e6e6ecolor: # cf0404}。菜单栏a { color: # 333文本装饰：无；}.menuTree a :悬停{ color : # 06F}.BTN { height :30 pxmargin-top :10 px；边框-底部：1px实心# CCC }/style/head dydiv class=' BTN '输入名称=' type=' button ' id=' BTN _ open '值='全部展开/input name=' type=' button ' id=' BTN _ close ' value='全部收缩//div div id=' menuTree ' class=' menuTree '/div/body/html脚本类型=' text/JavaScript ' var JSON=[{ ' name ' : ' * a '，' list':[ {'name':'**a '，' url':'#a1'}，{'name':'**aa '，' list':[ {'name':'***a '，' URL ' 3333333330递归实现获取无级树数据并生成数字正射影像图结构*/var str=' '；var forTree=函数(o){ for(var I=0；io . lengthi){ var URL str=' '；尝试{如果(类型为o[I][' URL ']==' undefined '){ URL str=' div span ' o[I][' name ']'/spanul '；} else { urlst=' div spana href=' o[I][' URL ']' o[I][' name ']'/a/spanul '；} str=urlstrif(o[i]['list']！=null){ FOrtree(o[I][' list '])；} str='/ul/div '；}catch(e){} }返回字符串；}/*添加无级树*/文档。getelementbyid(' menuTree ').innerHTML=FOrtree(JSON)；/*树形菜单*/var menuTree=function(){ //给有子对象的元素加[ -] $('#menuTree ul ').每个（函数（索引，元素){ var ulContent=$(元素))。html()；var spanContent=$(元素)。兄弟姐妹(' span ').html()；if(ulContent){ $(元素)。兄弟姐妹(' span ').html('[]' spanContent)} })；$(' # MenuTrie ').查找(“div span”).单击(function(){ var ul=$(this)).兄弟姐妹(' ul ')；var spanStr=$(this).html()；var SPan内容=SPan字符串。substr(3，SPan字符串。长度)；if(ul.find('div ').html()！=null){ if(ul。CSS(' display ')==' none '){ ul。表演(300)；$(这个)。html('[-]' spanContent)；} else { ul。隐藏(300)；$(这个)。html('[]' spanContent)；} } })}()/*展开*/$('#btn_open ').单击(function(){ $('#menuTree ul ').表演(300);curzt('-')；})/*收缩*/$('#btn_close ').单击(function(){ $('#menuTree ul ').隐藏(300);curzt(' ')；})函数curzt(v){ $('#menuTree span ').每个（函数（索引，元素){ var ul=$(this)).兄弟姐妹(' ul ')；var spanStr=$(this).html()；var SPan内容=SPan字符串。substr(3，SPan字符串。长度)；if(ul.find('div ').html()！=null){ $(this).html('[' v ']' SPan '内容)；} });}/脚本希望本文所述对大家的jquery程序设计有所帮助。