创建包含数据的菜单

Question

我有这样的数据：

var data = [ {
      'title': 'Menu 1',
      'href': '#',
      'submenu': [ {
          'title': 'Sub Menu1',
          'href': '#',
          'submenu': [ {
              'title': 'Sub sub Menu1',
              'href': '#'
            }, {
              'title': 'Sub sub Menu2',
              'href': '#'
            }
          ]
        }, {
          'title': 'Sub Menu2',
          'href': '#'
        }, {
          'title': 'Sub Menu3',
          'href': '#'
        }
      ]
    }, {
      'title': 'Menu 2'
      'href': '#',
      'submenu': [ {
          'title': 'Sub Menu 2',
          'href': '#'
        }
      ]
    }, {
      'title': 'Menu 3',
      'href': '#'
    }
];

我有HTML：

<div id="html"></div>

如何使用jQuery创建菜单HTML，如下所示： https://jsfiddle.net/yvj81oax/

<ul>
<li>
    <a href="#">Menu 1</a>
    <ul>
        <li>
            <a href="#">Sub Menu 1</a>
            <ul>
                <li><a href="#">Sub sub Menu 1</a></li>
                <li><a href="#">Sub sub Menu 2</a></li>
            </ul>
        </li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
    </ul>
</li>
<li>
    <a href="#">Menu 2</a>
    <ul>
        <li><a href="#">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#">Menu 3</a></li>

Answer 1

好的，我已经更正了你的data。这是工作解决方案。

var data = [{
  'title': 'Menu 1',
  'href': '#',
  'submenu': [{
    'title': 'Sub Menu1',
    'href': '#',
    'submenu': [{
      'title': 'Sub sub Menu1',
      'href': '#'
    }, {
      'title': 'Sub sub Menu2',
      'href': '#'
    }]
  }, {
    'title': 'Sub Menu2',
    'href': '#'
  }, {
    'title': 'Sub Menu3',
    'href': '#'
  }]
}, {
  'title': 'Menu 2',
  'href': '#',
  'submenu': [{
    'title': 'Sub Menu 2',
    'href': '#'
  }]
}, {
  'title': 'Menu 3',
  'href': '#'
}];
var finalMenu = '';
$(function() {
  function makeMenu(data) {
    if (data.length > 0) {
      finalMenu += '<ul>';
      $.each(data, function(i, v) {
        finalMenu += '<li>';
        finalMenu += '<a href="' + v.href + '">' + v.title + '</a>';
        if (typeof v.submenu != "undefined")
          makeMenu(v.submenu);
        finalMenu += '</li>';
      });
      finalMenu += '</ul>';
    }
  }
  makeMenu(data);
  $("#menu").html(finalMenu);
});

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div id="menu"></div>