JSON 菜单，在父 LI 中添加子级别

Question

我已经制作了这个 JSON 菜单，但在其父 LI 中获取子菜单 UL 时遇到了困难 - 有人知道我需要在这里调整什么吗？

JS：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

// lets do some JSON magic and make a menu!
JSON = {
   "menu":[
      {
         "id":"contact",
         "leaf":true,
         "description":"Contact Us",
         "link":"",
         "content":"contactUs.html",
         "cssClass":"static-content",
         "menu":null
      },
      {
         "id":"rules",
         "leaf":false,
         "description":"Sports Betting Rules",
         "link":"",
         "content":"",
         "cssClass":"",
         "menu":[
            {
               "id":"types",
               "leaf":true,
               "description":"Wager Types",
               "link":"",
               "content":"wagerTypes.html",
               "cssClass":"static-content wager-types",
               "menu":null
            },
            {
               "id":"odds",
               "leaf":true,
               "description":"Odds & Lines",
               "link":"",
               "content":"oddsAndLines.html",
               "cssClass":"static-content",
               "menu":null
            },
            {
               "id":"policies",
               "leaf":true,
               "description":"Rules & Policies",
               "link":"",
               "content":"rulesAndPolicies.html",
               "cssClass":"static-content rules-policies",
               "menu":null
            },
            {
               "id":"bonuses",
               "leaf":true,
               "description":"Sports Bonuses",
               "link":"",
               "content":"sportsBonuses.html",
               "cssClass":"static-content",
               "menu":null
            }
         ]
      },
      {
         "id":"conditions",
         "leaf":false,
         "description":"Terms & Conditions",
         "link":"",
         "content":"",
         "cssClass":"",
         "menu":[
            {
               "id":"termsOfService",
               "leaf":true,
               "description":"Terms of Service",
               "link":"",
               "content":"termsOfService.html",
               "cssClass":"static-content",
               "menu":null
            },
            {
               "id":"privacy",
               "leaf":true,
               "description":"Privacy Policy",
               "link":"",
               "content":"privacy.html",
               "cssClass":"static-content",
               "menu":null
            }
         ]
      },
      {
         "id":"view",
         "leaf":true,
         "description":"View in: Mobile | Full Site",
         "link":"",
         "content":"view.html",
         "cssClass":"static-content",
         "menu":null
      }
   ]
}

$(document).ready(function () {

    function buildMenu(ul, menu) {
        for (var i = 0; i < menu.length; i++) {
            var li = $(ul).append('<li id="'+menu[i].id+'" class="'+menu[i].leaf+' '+menu[i].cssClass+'"><a href="'+menu[i].link+'">'+menu[i].content+'</a></li>');
            if (menu[i].menu!=null) {
                var subul=$('<ul id="submenu-'+menu[i].id+'"></ul>');
                $(li).append(subul);
                buildMenu($(subul), menu[i].menu);
            }
        }
    }

    var menu = $(".main-menu");
    buildMenu(menu, JSON.menu);

});

</script>

<div class="main-menu"></div>

Answer 1

主要问题在于您的代码的以下几点：

var li = $(ul).append('<li id="'+menu[i].id+'" class="'+menu[i].leaf+' '+menu[i].cssClass+'"><a href="'+menu[i].link+'">'+menu[i].content+'</a></li>');

append 方法返回 <ul> 而不是您想象的 <li>。因此，由于这个原因，代码不能像您想象的那样工作。为了解决这个问题，将代码行一分为二：

        var li = $('<li id="'+menu[i].id+'" class="'+menu[i].leaf+' '+menu[i].cssClass+'"><a href="'+menu[i].link+'">'+menu[i].content+'</a></li>');
        $(ul).append(li);

完整代码在这里：

var JSON = {
  "menu": [{
    "id": "contact",
    "leaf": true,
    "description": "Contact Us",
    "link": "",
    "content": "contactUs.html",
    "cssClass": "static-content",
    "menu": null
  }, {
    "id": "rules",
    "leaf": false,
    "description": "Sports Betting Rules",
    "link": "",
    "content": "",
    "cssClass": "",
    "menu": [{
      "id": "types",
      "leaf": true,
      "description": "Wager Types",
      "link": "",
      "content": "wagerTypes.html",
      "cssClass": "static-content wager-types",
      "menu": null
    }, {
      "id": "odds",
      "leaf": true,
      "description": "Odds & Lines",
      "link": "",
      "content": "oddsAndLines.html",
      "cssClass": "static-content",
      "menu": null
    }, {
      "id": "policies",
      "leaf": true,
      "description": "Rules & Policies",
      "link": "",
      "content": "rulesAndPolicies.html",
      "cssClass": "static-content rules-policies",
      "menu": null
    }, {
      "id": "bonuses",
      "leaf": true,
      "description": "Sports Bonuses",
      "link": "",
      "content": "sportsBonuses.html",
      "cssClass": "static-content",
      "menu": null
    }]
  }, {
    "id": "conditions",
    "leaf": false,
    "description": "Terms & Conditions",
    "link": "",
    "content": "",
    "cssClass": "",
    "menu": [{
      "id": "termsOfService",
      "leaf": true,
      "description": "Terms of Service",
      "link": "",
      "content": "termsOfService.html",
      "cssClass": "static-content",
      "menu": null
    }, {
      "id": "privacy",
      "leaf": true,
      "description": "Privacy Policy",
      "link": "",
      "content": "privacy.html",
      "cssClass": "static-content",
      "menu": null
    }]
  }, {
    "id": "view",
    "leaf": true,
    "description": "View in: Mobile | Full Site",
    "link": "",
    "content": "view.html",
    "cssClass": "static-content",
    "menu": null
  }]
};

$(document).ready(function() {

  function buildMenu(ul, menu) {
    for (var i = 0; i < menu.length; i++) {
      var li = $('<li id="' + menu[i].id + '" class="' + menu[i].leaf + ' ' + menu[i].cssClass + '"><a href="' + menu[i].link + '">' + menu[i].content + '</a></li>');
      $(ul).append(li);
      if (menu[i].menu != null) {
        var subul = $('<ul id="submenu-' + menu[i].id + '"></ul>');
        $(li).append(subul);
        buildMenu($(subul), menu[i].menu);
      }
    }
  }

  var menu = $(".main-menu");
  buildMenu(menu, JSON.menu);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-menu"></ul>

注意：我使用了<ul class="main-menu"></ul> 而不是你的<div class="main-menu"></div>，因为这样更正确。

Answer 2

function buildMenu(element, menu) {
    $.each(menu,function(key, obj) {
        var li = element.append('<li id="'+obj.id+'" class="'+obj.leaf+' '+obj.cssClass+'"><a href="'+obj.link+'">'+obj.content+'</a></li>');
        if (obj.menu!=null) {
                var subul=$('<ul id="submenu-'+obj.id+'"></ul>');
                $(li).append(subul);
                buildMenu($(subul), obj.menu);
            }
    });
};

$(document).ready(function () {
    var menu = $(".main-menu");
    buildMenu(menu, JSON.menu);
});

<ul class="main-menu">
</ul>