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

    本例子使用json数据,拼接ul和li来实现的1。准备json数据:代码如下:var menuData = [{id:0,pid:-1,name:"订购产品",url:"",children:[{id:1,pid:0,name:"电脑配件",url:"http://www。
    gxlcms。com",children:[{id:20,pid:1,name:"cpu",url:"http://www。gxlcms。com",children:[{id:30,pid:20,name:"Intel",url:"http://www。
  gxlcms。  com",children:[{id:3000,pid:30,name:"Intel 01",url:""},{id:3001,pid:30,name:"Intel 02",url:""},{id:3002,pid:30,name:"Intel 03",url:""},{id:3003,pid:30,name:"Intel 04",url:""},{id:3004,pid:30,name:"Intel 05",url:""},{id:3005,pid:30,name:"Intel 06",url:""},{id:3006,pid:30,name:"Intel 07",url:""},{id:3007,pid:30,name:"Intel 08",url:""},{id:3008,pid:30,name:"Intel 09",url:""}]},{id:31,pid:20,name:"AMD",url:"http://www。
    gxlcms。com",children:[{id:3100,pid:31,name:"AMD 01",url:""},{id:3101,pid:31,name:"AMD 02",url:""},{id:3102,pid:31,name:"AMD 03",url:""},{id:3103,pid:31,name:"AMD 04",url:""},{id:3104,pid:31,name:"AMD 05",url:""},{id:3105,pid:31,name:"AMD 06",url:""},{id:3106,pid:31,name:"AMD 07",url:""},{id:3107,pid:31,name:"AMD 08",url:""},{id:3108,pid:31,name:"AMD 09",url:""}]}]},{id:21,pid:1,name:"内存",url:"http://www。
    gxlcms。com"},{id:22,pid:1,name:"硬盘",url:"http://www。gxlcms。com"},{id:23,pid:1,name:"主板",url:"http://www。
  gxlcms。com"},{id:24,pid:1,name:"显卡",url:"http://www。  gxlcms。com"},{id:25,pid:1,name:"显示器",url:"http://www。
  gxlcms。com"},{id:26,pid:1,name:"主机箱",url:"http://www。gxlcms。com"},{id:27,pid:1,name:"主机箱电源",url:"http://www。
    gxlcms。com"},{id:28,pid:1,name:"键鼠(有线)",url:"http://www。gxlcms。com"},{id:29,pid:1,name:"键鼠(无线)",url:"http://www。
  gxlcms。com"}],url:"http://www。  gxlcms。com"},{id:101,pid:0,name:"监控器材",children:[{id:102,pid:101,name:"摄像头",url:"http://www。
  gxlcms。com"},{id:103,pid:101,name:"摄像头",url:"http://www。  gxlcms。com"},{id:104,pid:101,name:"摄像头",url:"http://www。
  gxlcms。com"},{id:112,pid:101,name:"摄像头",url:"http://www。gxlcms。com"},{id:113,pid:101,name:"摄像头",url:"http://www。
    gxlcms。com"},{id:114,pid:101,name:"摄像头",url:"http://www。gxlcms。com"},{id:115,pid:101,name:"摄像头",url:"http://www。
  gxlcms。com"},{id:116,pid:101,name:"摄像头",url:"http://www。  gxlcms。com"},{id:117,pid:101,name:"摄像头",url:"http://www。
  gxlcms。com"}],url:"http://www。gxlcms。com"},{id:201,pid:0,name:"数码产品",children:[{id:202,pid:201,name:"摄像头",url:"http://www。
    gxlcms。com"}],url:"http://www。gxlcms。com"},{id:301,pid:0,name:"网络产品",children:[{id:302,pid:301,name:"摄像头",url:"http://www。
  gxlcms。com"}],url:"http://www。  gxlcms。com"},{id:401,pid:0,name:"打印耗材",children:[{id:402,pid:401,name:"打印机",url:"http://www。
  gxlcms。com"},{id:403,pid:401,name:"油墨",url:"http://www。  gxlcms。com"},{id:404,pid:401,name:"纸张",url:"http://www。
  gxlcms。com"},{id:405,pid:401,name:"摄像头",url:"http://www。gxlcms。com"},{id:406,pid:401,name:"摄像头",url:"http://www。
    gxlcms。com"},{id:407,pid:401,name:"摄像头",url:"http://www。gxlcms。com"},{id:408,pid:401,name:"摄像头",url:"http://www。
  gxlcms。com"}],url:"http://www。  gxlcms。com"}]},{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代码:代码如下:3。解析json数据(plugin-menu。js文件):刚学会写jquery插件,写的还比较乱,凑合着看吧代码如下:(function($){$。
  fn。extend({menu:function(options){var defaults = {data:[],ulId:"baseMenu"};var options = $。  extend(defaults, options);// 开始拼接ul,li$。
  each(options。data,function(i,v){var li = $("");var _a = $(""+options。data[i]。name+"");_a。attr("href",options。
    data[i]。url)。appendTo(li);_each(options。data[i],li);li。appendTo($("#"+options。ulId));});// 给li添加事件$(this)。
  find("li")。hover(function(){var id = $(this)。  attr("id");$(this)。find("ul[name='"+id+"']")。
  show();},function(){var id = $(this)。attr("id");$(this)。find("ul[name='"+id+"']")。hide();});}});})(jQuery);因为支持无限级,所以肯定会用到递归方法:代码如下:function _each(data,li){if(data==undefined||data。
    children==undefined){return false;}var ul = $("");$。each(data。children,function(i,v){var _li = $("");var _a = $(""+data。
  children[i]。  name+"");_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() {$("#menu")。
    menu({data:menuData,ulId:"baseMenu"});});最后,css样式:代码如下:ul,li{list-style:none;padding:0px;margin:0px;}#menu *{line-height:30px;}#menu a{text-decoration:none;}#menu ul{text-align:left;}#menu>ul>li{text-align:center;width:80px;float:left;}#menu>ul>li>a{color:#000;}#menu>ul>li:hover{background:#F0F0F0;}#menu>ul>li ul{display:none;width:150px;position:absolute;background:#c1cd94;box-shadow:2px 2px 2px #000;-webkit-box-shadow:2px 2px 2px #000;-moz-box-shadow:2px 2px 2px #123;}#menu>ul>li>ul li{padding-left:5px; position:relative;}#menu>ul>li>ul li>a{color:#000;}#menu>ul>li>ul li:hover{background:#d3dbb3;}#menu>ul>li>ul>li ul{left:150px; top:0px;}。