javascript - 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]));

你的问题是这个函数return什么都没有，所以递归使用它是行不通的。