从 JSON 创建菜单 [英] Creating a Menu from JSON
问题描述
我正在尝试使用 jQuery UI 创建动态菜单.
I am trying to create a dynamic menu using jQuery UI.
我将从 JSON 文件中获取条目并创建我的菜单项.我决定先做一个小演示,然后再进行更大规模的尝试.这是我的小提琴,它按我希望的方式工作.现在我无法让它与 JSON 文件一起使用.
I will be fetching entries from a JSON file and creating my menu items.I decided to do a small demo before i try this on a larger scale.Here's my fiddle which works the way i want it to work. Now I cant get this to work with a JSON file.
这里是 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 将类似于以下内容.
How can i design my entire menu using the values from the JSON where the Li's will be something like the following.
<li><a href="#3-2">Borrusia Dortmund</a>
</li>
这个问题听起来好像我什么都没试过,但我试过了.它只是我无法理解的 JSON 部分,Jsfiddle 无法正确读取它.我想知道我的 json 格式是否不正确.任何帮助将不胜感激
The question may sound like i have not tried anything, but i have. its just the JSON part which i cannot understand, Jsfiddle does not read it properly. I am wondering if my jSON is not formatted properly. Any help would be appreciated
推荐答案
只需迭代您的 JSON.menu 数组并从中生成菜单(重命名为 JSON -> data ...):
Just iterate your JSON.menu array and generate the menu from it (renamed 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();
});
这篇关于从 JSON 创建菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!