jquery 무한 드롭다운 menu_jquery에 대한 간단한 구현 코드-JS 튜토리얼-php.cn

jquery 무한 드롭다운 menu_jquery에 대한 간단한 구현 코드
WBOY
풀어 주다： 2016-05-16 16:59:09
원래의
950명이 탐색했습니다.
이 예에서는 json 데이터를 사용하여 ul과 li를 연결하여
렌더링을 구현합니다.

1. json 데이터 준비:
코드 복사 코드는 다음과 같습니다.
var menuData = [
            {id:0,pid:-1,name:"订购产품",url:"",children:[
                {id:1,pid:0, 이름:"电脑配件",url:"http://www.jb51.net",children:[
                   {id:20,pid:1,name:"cpu",url:"http://www .jb51.net",children:[
                       {id:30,pid:20,name:"Intel",url:"http://www.jb51.net",children:[
                          {id: 3000,pid:30,name:"Intel 01",url:""},
                         {id:3001,pid:30,name:"Intel 02",url:""},
                        아이디: 3002,pid:30,name:"Intel 03",url:""},
                         {id:3003,pid:30,name:"Intel 04",url:""},
                         { 아이디: { 아이디: { 아이디: 3008,pid:30,이름:"Intel 09",url:""}
                     ]},
                      {id:31,pid:20,name:"AMD",url:"http://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:"AM 디 04",url:""},
                          {id:3104,pid:31,name:"AMD 05",url:""},
                        {id:3105,pid:31,name:"AM 디 06",url:""},
                          {id:3106,pid:31,name:"AMD 07",url:""},
                        {id:3107,pid:31,name:"AM 디 08",url:""},
                           {id:3108,pid:31,name:"AMD 09",url:""}
                      ]}
                                  ), ,name:"하드 드라이브",url:"http://www.jb51.net"},
                             > "그래픽 카드",url:"http://www.jb51.net"},
 {id:25,pid:1, 이름:"monitor",url:"http://www.jb51.net "},
                                                                                                   > .net"},
 {id:28,pid: 1,name:"키보드 및 마우스(유선)",url:"http://www.jb51.net"},
                                                                                                                 :"http://www.jb51.net "}
                                                                                                   
 {id: 103 , pid: 101, 이름:"카메라",url:"http://www.jb51.net"},
                                                                     | 
 {id:112,pid:101,name:"카메라 ",url:"http://www.jb51.net"},
 {id:113,pid:101,name :"카메라",url:"http://www.jb51.net"}, 
                                                                                                                                           "},
 {id:115,pid:101,name:"카메라",url:"http://www.jb51.net"},
 "카메라",url:"http ://www.jb51.net"},
                                                  {id:117, pid:101, name: "Camera", url: "http://www.jb51.net" }
 ~                          ,pid:201 ,이름:"카메라",url:"http://www.jb51.net"}
                                                                              > > :"http://www.jb51.net"}. ",url:"http://www.jb51.net"},
                                                                                                                      
                     {id:406, pid:401, 이름: "카메라", URL: "http://www.jb51. net"}, 
                                                                                         ,url:"http://www.jb51.net"},
                                                                                                             ~    >                                                                                                             ~ ~ > 🎜>
2.html 코드:




코드 복사


 코드는 다음과 같습니다.


< div id="menu">