时间戳

首页 > 解决方案 > 如何将 JSON 动态插入手风琴菜单？

javascript - 如何将 JSON 动态插入手风琴菜单？

问题描述

我需要用 JSON 制作一个多级手风琴动态菜单。我下载了一个模板，并试图在这个菜单中调整我的 JSON 文件，但是当我创建子菜单时，它只返回一个未定义的值。

$.getJSON("menu.json", function(data) {
  createHtml(data.menu);
});

function createHtml(menuJson) {
  var html = '';


  $.each(menuJson, function(i, item) {
    if (item.sub) {

      html += '<li class="has-children">'+
                '<input type="checkbox" checked/>'+
                '<label><span class="'+item.icon+'"></span>  '+
                item.name+'</label><ul>'
      html += createHtml(item.sub);
      html += '</ul></li>';
    } else {
      html += '<li><a href="'+item.link+'"><i class="'+item.icon
            + 'mmenu-icon"></i>&nbsp; '+item.name+'</a></li>';
    }
    return html;
  })
  $(".cd-accordion-menu").html(html);

}

HTML：

    <ul class="cd-accordion-menu animated">
    <li class="has-children">
        <input type="checkbox" name ="group-1" id="group-1" checked>
        <label for="group-1">Group 1</label>

        <ul>
            <li class="has-children">
                <input type="checkbox" name ="sub-group-1" id="sub-group-1">
                <label for="sub-group-1">Sub Group 1</label>
                <ul>
                    <li><a href="#0">Image</a></li>
                    <li><a href="#0">Image</a></li>
                    <li><a href="#0">Image</a></li>
                </ul>
            </li>
            <li class="has-children">
                <input type="checkbox" name ="sub-group-2" id="sub-group-2">
                <label for="sub-group-2">Sub Group 2</label>
                <ul>
                    <li class="has-children">
                        <input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3">
                        <label for="sub-group-level-3">Sub Group Level 3</label>
                        <ul>
                            <li><a href="#0">Image</a></li>
                            <li><a href="#0">Image</a></li>
                        </ul>

如何修改函数以更好地适应模板？

标签： javascriptjqueryhtmljsonmenu

解决方案

这个菜单的逻辑是有缺陷的。您在 forEach 内部返回，这没有任何意义，并且您正在为菜单设置 html，以便主菜单和递归调用。那也是错误的。

返回需要在 forEach 之外，并且菜单调用的设置需要在其他地方完成。

$.getJSON("menu.json", function(data) {
  var html = createHtml(data.menu);
  $(".cd-accordion-menu").html(html); //set html here
});

function createHtml(menuJson) {
  var html = '';
  $.each(menuJson, function(i, item) {
    if (item.sub) {
      html += '<li class="has-children">' +
        '<input type="checkbox" checked/>' +
        '<label><span class="' + item.icon + '"></span>  ' +
        item.name + '</label><ul>'
      html += createHtml(item.sub);
      html += '</ul></li>';
    } else {
      html += '<li><a href="' + item.link + '"><i class="' + item.icon +
        'mmenu-icon"></i>&nbsp; ' + item.name + '</a></li>';
    }
  })
  return html; //return html outside of the loop
}

推荐阅读