从JSON创建菜单

一尘不染

从JSON创建菜单

json

我正在尝试使用jQuery UI创建动态菜单。

我将从JSON文件中获取条目并创建菜单项。在大规模尝试之前，我决定做一个小演示。这是我的小提琴，它按照我想要的方式工作。现在，我无法将其与JSON文件一起使用。

这是JSON

var JSON = 
    {
       menu: 
          [
             {name: 'Croatia', link: '0', sub: null},
             {name: 'England', link: '1', sub: 
                [
                   {name: 'Arsenal',link: '0-0', sub: null},
                   {name: 'Liverpool',link: '0-1', sub: null},
                   {name: 'Manchester United',link: '0-2', sub: null}
                ]
             },
             {name: 'Spain', link: '2', sub: 
                [
                   {name: 'Barcelona',link: '2-0', sub: null},
                   {name: 'Real Madrid',link: '2-1', sub: null}
                ]
              },        
              {name: 'Germany', link: '3',sub: 
                [
                   {name: 'Bayern Munich',link: '3-1', sub: null},
                   {name: 'Borrusia Dortmund',link: '3-2', sub: null}
                ]
              }
          ]
    }

我如何使用JSON中的值设计我的整个菜单，其中Li类似于以下内容。

<li><a href="#3-2">Borrusia Dortmund</a>
</li>

编辑：
这个问题听起来好像我还没有尝试过，但是我已经尝试过。它只是我无法理解的JSON部分，Jsfiddle无法正确读取它。我想知道我的jSON格式是否正确。任何帮助，将不胜感激

阅读 322

2020-07-27

共1个答案

一尘不染

只需迭代JSON.menu数组并从中生成菜单（重命名为JSON-> data …）：

$(function () {
    var getMenuItem = function (itemData) {
        var item = $("<li>")
            .append(
        $("<a>", {
            href: '#' + itemData.link,
            html: itemData.name
        }));
        if (itemData.sub) {
            var subList = $("<ul>");
            $.each(itemData.sub, function () {
                subList.append(getMenuItem(this));
            });
            item.append(subList);
        }
        return item;
    };

    var $menu = $("#menu");
    $.each(data.menu, function () {
        $menu.append(
            getMenuItem(this)
        );
    });
    $menu.menu();
});

http://jsfiddle.net/9uhc3/5/

2020-07-27