jquery 无限级下拉菜单的简单实现代码

时间：2016.04.19 发布人：爱新觉罗婳初_
jquery 无限级下拉菜单的简单实现代码

已解决问题

谷歌爱新觉罗婳初_用户在2016.04.19提交了关于“钟南山jquery 无限级下拉菜单的简单实现代码”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-03-12T20:39:45。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，你无异于雪中送炭,让我感激涕零 ！

希望以下的回答，能够帮助你。

第1个回答

用户名：Blul问答lyvotourb  

本例子使用js用洲质表on**,拼接ul和li来实现的
效果图：




1.准备json**:
复制代码代码如下:
varme**Data=[
{喜游才块界差跳且蒸id:0,pid:-1,nam浓地般行酒岩客倒e:"订购**品",url:"",children:[
{的id:1,pid:0,name:"电脑配件",url:"http://www.***.net",chi良给新始冷商逐具配ldren:[
{id:20,pid:1,name:孙"cpu",url:"http://www.***.net",children:[
{id:30,pid:2本器象内便长最想粒常0,name:"Intel",url:"http://www.***.net",ch封朝论粒派转备用印ildren:[
{氢固速id:3000,p屋每频低浓山很权id:30,name:"婷算的参赵基括Intel01",url:""},
{id:3001,pid:30,name:"Intel02",url:""},
{id:3002,pid:30,name:"Intel03",url:""},
{id:3003,pid:30,name:"Intel04",url:""},
{id:3004,p树id:30,name:"Intel05",url:""},
{id:3005,pid:30,name:"Intel06",url:""},
{id:3006,pid:30,name:"Intel07",url:""},
{id:3007,pid:30,name:"Intel08",url:""},
{主的id:3008,pid:30,name:"Intel0社亲加求波居功就优倒9",url:""}
]律诉好万属四},
{id:31,pid:20,name:"AMD",url:"http://www.*课生占自精易段径**.net",children:[
{id:3100,pid:31,name:"AMD01",url:""},
{id:3101,pid:31,name:"AMD02",url:""},
{id:3102,pid:31,name:"AMD03",url:""},
{id:3103,pid:31,name:"AMD04",url:""},
{id:3104,pid:31,name:"AMD05",url:""},
{id:3105,pid:31,name:"AMD06",url:""},
{id:3106,pid:31,name:"AMD07",url:""},
{id:3107,pid:31,name:"AMD08",url:""},
{id:3108,pid:31,name:"AMD09",url:""}
]}
]},
{id:21,pid:1,name:"内存",url:"http://www.***.net"},
{id:22,pid:1,name:"硬盘",url:"http://www.***.net"},
{id:23,pid:1,name:"主板",url:"http://www.***.net"},
{id:24,pid:1,name:"显",url:"http://www.***.net"},
{id:25,pid:1,name:"显示器",url:"http://www.***.net"},
{id:26,pid:1,name:"主机箱",url:"http://www.***.net"},
{id:27,pid:1,name:"主机箱电源",url:"http://www.***.net"},
{id:28,pid:1,name:"键鼠(有线)",url:"http://www.***.net"},
{id:29,pid:1,name:"键鼠(无线)",url:"http://www.***.net"}
],url:"http://www.***.net"},
{id:101,pid:0,name:"监控器材",children:[
{id:102,pid:101,name:"摄像头",url:"http://www.***.net"},
{id:103,pid:101,name:"摄像头",url:"http://www.***.net"},
{id:104,pid:101,name:"摄像头",url:"http://www.***.net"},
{id:112,pid:101,name:"摄像头",url:"http://www.***.net"},
{id:113,pid:101,name:"摄像头",url:"http://www.***.net"},
{id:114,pid:101,name:"摄像头",url:"http://www.***.net"},
{id:115,pid:101,name:"摄像头",url:"http://www.***.net"},
{id:116,pid:101,name:"摄像头",url:"http://www.***.net"},
{id:117,pid:101,name:"摄像头",url:"http://www.***.net"}
],url:"http://www.***.net"},
{id:201,pid:0,name:"数码**品",children:[
{id:202,pid:201,name:"摄像头",url:"http://www.***.net"}
],url:"http://www.***.net"},
{id:301,pid:0,name:"网络**品",children:[
{id:302,pid:301,name:"摄像头",url:"http://www.***.net"}
],url:"http://www.***.net"},
{id:401,pid:0,name:"打印耗材",children:[
{id:402,pid:401,name:"打印机",url:"http://www.***.net"},
{id:403,pid:401,name:"油墨",url:"http://www.***.net"},
{id:404,pid:401,name:"纸张",url:"http://www.***.net"},
{id:405,pid:401,name:"摄像头",url:"http://www.***.net"},
{id:406,pid:401,name:"摄像头",url:"http://www.***.net"},
{id:407,pid:401,name:"摄像头",url:"http://www.***.net"},
{id:408,pid:401,name:"摄像头",url:"http://www.***.net"}
],url:"http://www.***.net"}
]},
{id:1000,pid:-1,name:"我的订单",url:"",children:[
{id:1001,pid:1000,name:"已过期订单",url:""},
{id:1001,pid:1000,name:"已付款订单",url:""}
]},
{id:2000,pid:-1,name:"公司信息",url:"",children:[
{id:2001,pid:2000,name:"最新新闻",url:""},
{id:2002,pid:2000,name:"公司地址",url:""}
]}
];

2.html代码:
复制代码代码如下:
<divid="me**"><ulid="baseMe**"></ul></div>

3.解析json**(plugin-me**.js文件):刚学会写jquery插件,写的还比较乱,凑合着看吧
复制代码代码如下:
(function($){
$.fn.extend({
me**:function(options){
vardefaults={
data:[],
ulId:"baseMe**"
};
varoptions=$.extend(defaults,options);
//开始拼接ul,li
$.each(***.data,function(i,v){
varli=$("<liid='"+***.data[i].id+"'name='"+***.data[i].pid+"'></li>");
var_a=$("<a>"+***.data[i].name+"</a>");
_a.attr("href",***.data[i].url)
.appendTo(li);

_each(***.data[i],li);
li.appendTo($("#"+options.ulId));
});
//给li添加事件
$(this).find("li").hover(function(){
varid=$(this).attr("id");
$(this).find("ul[name='"+id+"']").show();
},function(){
varid=$(this).attr("id");
$(this).find("ul[name='"+id+"']").hide();
});
}
});
})(jQuery);

因为支持无限级,所以肯定会用到递归方法:
复制代码代码如下:
function_each(data,li){
if(data==undefined||data.children==undefined){
returnfalse;
}
varul=$("<ulname='"+***.id+"'style='display:none;'></ul>");

$.each(data.children,function(i,v){
var_li=$("<liid='"+data.children[i].id+"'name='"+data.children[i].pid+"'></li>");
var_a=$("<a>"+data.children[i].name+"</a>");
_a.attr("href",data.children[i].url)
.attr("target","_blank")
.appendTo(_li);

if(data.children[i].children!=undefined){
_each(data.children[i],_li);
}
_li.appendTo(ul);
});
ul.appendTo(li);
}

4.调用插件:
复制代码代码如下:
$(function(){
$("#me**").me**({data:me**Data,ulId:"baseMe**"});
});

最后,css样式:
复制代码代码如下:
ul,li{list-style:none;padding:0px;margin:0px;}
#me***{line-height:30px;}
#me**a{text-decoration:none;}
#me**ul{text-align:left;}
#me**>ul>li{text-align:center;width:80px;float:left;}
#me**>ul>li>a{color:#000;}
#me**>ul>li:hover{background:#F0F0F0;}
#me**>ul>liul{display:none;width:150px;position:absolute;background:#c1cd94;box-shadow:2px2px2px#000;-webkit-box-shadow:2px2px2px#000;
　　-moz-box-shadow:2px2px2px#123;}
#me**>ul>li>ulli{padding-left:**x;position:relative;}
#me**>ul>li>ulli>a{color:#000;}
#me**>ul>li>ulli:hover{background:#d3dbb3;}
#me**>ul>li>ul>liul{left:150px;top:0px;}