我正在尝试使用 twitter bootstrap 构建动态菜单。 这个想法是加载一个包含菜单项的 json 文件:
// test.json
{
"children": [
{
"text": "Item1",
"children": [
{"text": "Item11", "link": "/link11"},
{"text": "Item12", "link":"/link12"},
{"text": "Item13", "children": [
{"text": "Item131", "link":"/link131"},
{"text": "Item132", "link":"/link132"}
]},
{"text": "Item14", "link":"/link13"}
]},
{
"text": "Item2",
"children": [
{"text": "Item21", "link":"/link21"},
{"text": "Item22", "link":"/link22"}
]},
{
"text": "Item3"
}
]
}
这可以在 Twitter bootstrap 中静态呈现:
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="navbar">
<div class="navbar-inner" id ="navbar-inner-main">
<div class="container">
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Item1</a>
<ul class="dropdown-menu">
<li>
<a href="/link11">Item11</a>
</li>
<li>
<a href="/link12">Item12</a>
</li>
<li class="dropdown-submenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Item13</a>
<ul class="dropdown-menu">
<li>
<a href="/link131">Item131</a>
</li>
<li>
<a href="/link132">Item132</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Item2</a>
<ul class="dropdown-menu">
<li>
<a href="/link21">Item21</a>
</li>
<li>
<a href="/link22">Item22</a>
</li>
</ul>
</li>
<li>
<a href="#">Item3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
我想向index.html添加一个像这样的函数:
<script type="text/javascript">
$(document).ready(function () {
$.getJSON('ajax/test.json', function(data) {
// get json, parse it and append to .nav
});
});
</script>
我认为将 json 解析为无序列表的最佳方法是使用模板。 我尝试过 pure和 mustache没有成功。 该问题是由于下拉子菜单类导致递归方法不一致。
你有什么建议吗？
提前致谢
最佳答案
我也有类似的问题。
解决方案如下:
我的 JSON
[{
"name": "Cars",
"url": "#",
"parent_id": "-1",
"id": "1"
}, {
"name": "Toyota",
"url": "#",
"parent_id": "1",
"id": "2"
}, {
"name": "Corolla",
"url": "#",
"parent_id": "2",
"id": "3"
}, {
"name": "2013",
"url": "#",
"parent_id": "3",
"id": "4"
},
...
这是使用 Bootstrap 类生成下拉菜单的 JS
//load JSON file
$.getJSON('menu.json', function(data) {
//build menu
var builddata = function () {
var source = [];
var items = [];
for (i = 0; i < data.length; i++) {
var item = data[i];
var label = item["name"];
var parentid = item["parent_id"];
var id = item["id"];
var url = item["url"];
if (items[parentid]) {
var item = { parentid: parentid, label: label, url: url, item: item };
if (!items[parentid].items) {
items[parentid].items = [];
}
items[parentid].items[items[parentid].items.length] = item;
items[id] = item;
}
else {
items[id] = { parentid: parentid, label: label, url: url, item: item };
source[id] = items[id];
}
}
return source;
}
var buildUL = function (parent, items) {
$.each(items, function () {
if (this.label) {
var li = $("<li class='js-menu'>" + "<a href='"+ this.url +"'>" + this.label + " </a></li>");
li.appendTo(parent);
if (this.items && this.items.length > 0) {
var ul = $("<ul class='dropdown-menu js-menu'></ul>");
ul.appendTo(li);
buildUL(ul, this.items);
}
}
});
}
var source = builddata();
var ul = $(".json-menu");
ul.appendTo(".json-menu");
buildUL(ul, source);
//add bootstrap classes
if ($(".json-menu>li:has(ul.js-menu)"))
{
$(".json-menu>li.js-menu").addClass('dropdown-submenu');
}
if ($(".json-menu>li>ul.js-menu>li:has(> ul.js-menu)"))
{
$(".json-menu>li>ul.js-menu li ").addClass('dropdown-submenu');
}
$("ul.js-menu").find("li:not(:has(> ul.js-menu))").removeClass("dropdown-submenu");
});
因此，您需要的只是在“下拉” Bootstrap 类附近添加“json-menu”类
<ul class="dropdown-menu json-menu">
</ul>
你可以看到实例here
关于json - twitter bootstrap ajax 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15768406/