本例子使用json数据,拼接ul和li来实现的
效果图：
1.准备json数据:
复制代码 代码如下:
var menuData = [
{id:0,pid:-1,name:"订购产品",url:"",children:[
{id:1,pid:0,name:"电脑配件",url:"https://www.jb51.net",children:[
{id:20,pid:1,name:"cpu",url:"https://www.jb51.net",children:[
{id:30,pid:20,name:"Intel",url:"https://www.jb51.net",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:"https://www.jb51.net",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:"https://www.jb51.net"},
{id:22,pid:1,name:"硬盘",url:"https://www.jb51.net"},
{id:23,pid:1,name:"主板",url:"https://www.jb51.net"},
{id:24,pid:1,name:"显卡",url:"https://www.jb51.net"},
{id:25,pid:1,name:"显示器",url:"https://www.jb51.net"},
{id:26,pid:1,name:"主机箱",url:"https://www.jb51.net"},
{id:27,pid:1,name:"主机箱电源",url:"https://www.jb51.net"},
{id:28,pid:1,name:"键鼠(有线)",url:"https://www.jb51.net"},
{id:29,pid:1,name:"键鼠(无线)",url:"https://www.jb51.net"}
],url:"https://www.jb51.net"},
{id:101,pid:0,name:"监控器材",children:[
{id:102,pid:101,name:"摄像头",url:"https://www.jb51.net"},
{id:103,pid:101,name:"摄像头",url:"https://www.jb51.net"},
{id:104,pid:101,name:"摄像头",url:"https://www.jb51.net"},
{id:112,pid:101,name:"摄像头",url:"https://www.jb51.net"},
{id:113,pid:101,name:"摄像头",url:"https://www.jb51.net"},
{id:114,pid:101,name:"摄像头",url:"https://www.jb51.net"},
{id:115,pid:101,name:"摄像头",url:"https://www.jb51.net"},
{id:116,pid:101,name:"摄像头",url:"https://www.jb51.net"},
{id:117,pid:101,name:"摄像头",url:"https://www.jb51.net"}
],url:"https://www.jb51.net"},
{id:201,pid:0,name:"数码产品",children:[
{id:202,pid:201,name:"摄像头",url:"https://www.jb51.net"}
],url:"https://www.jb51.net"},
{id:301,pid:0,name:"网络产品",children:[
{id:302,pid:301,name:"摄像头",url:"https://www.jb51.net"}
],url:"https://www.jb51.net"},
{id:401,pid:0,name:"打印耗材",children:[
{id:402,pid:401,name:"打印机",url:"https://www.jb51.net"},
{id:403,pid:401,name:"油墨",url:"https://www.jb51.net"},
{id:404,pid:401,name:"纸张",url:"https://www.jb51.net"},
{id:405,pid:401,name:"摄像头",url:"https://www.jb51.net"},
{id:406,pid:401,name:"摄像头",url:"https://www.jb51.net"},
{id:407,pid:401,name:"摄像头",url:"https://www.jb51.net"},
{id:408,pid:401,name:"摄像头",url:"https://www.jb51.net"}
],url:"https://www.jb51.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代码:
复制代码 代码如下:
<div><ul></ul></div>
3.解析json数据(plugin-menu.js文件):刚学会写jquery插件,写的还比较乱,凑合着看吧
复制代码 代码如下: