jquery 동적 드롭 다운 메뉴 - 추가 문제

Question

JSON 정보를 사용하여 동적 드롭 다운을 만들고 있습니다. 기본적으로 작동하지만 부모와 함께 하위 메뉴를 추가 할 수는 없습니다. 누구든지 좋은 제안을 줄 수 있습니까?

는 JSON :

내 기능

"navigation":[ 
     { 
     "title":"Home", 
     "link":"index.html" 
     }, 
     { 
     "title":"Products", 
     "link":"product.html", 
     "subnav":[ 
      { 
       "title":"Webapps", 
       "link":"products/webapps.html" 
      }, 
      { 
       "title":"Mobile Apps", 
       "link":"products/mobile-apps.html" 
      } 
     ] 
     } 
    ] 

:

는

var naviHandler = function (navi) { 
    var localNaviData = navi, ul = '<ul>',naviLink=""; 
    $.map(localNaviData, function (val,i) { 
     naviLink +='<li>' 
     if(val.subnav){ 
      naviLink += naviHandler(val.subnav) 
     }else{ 
      naviLink +='<a href='+val.link+'>'+val.title+'</a>' 
     } 

    }) 

    naviLink +='</li></ul>'; 
    $('header').find('nav').append(naviLink); 
    } 

naviHandler(localData[obj]); 

Answer 1

내가 jQuery를 대신 jQuery를 함께 원시 HTML 코드를 만드는 개체를 만들 것

:

var create_menu = function(navi) { 
    var $ul = $('<ul />'); 

    $.map(navi, function(val, i) { 
     var $li = $('<li />'); 

     if (val.subnav) { 
      create_menu(val.subnav).appendTo($li); 
     } else { 
      $('<a />', {'href': val.link}).text(val.title).appendTo($li); 
     } 

     $li.appendTo($ul); 
    }); 

    return $ul; 
} 

$('header nav').append(create_menu(localData[obj])); 

귀하의 문제는 기능이었다 어떤 것도 입력하지 않으므로 재귀 적으로 사용하면 작동하지 않습니다.