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任何东西，因此递归使用它将无效。

jquery动态下拉菜单 - 附加问题

1 个答案: