Json twitter引导ajax下拉列表
我正在尝试使用twitter引导构建一个动态菜单。 想法是加载一个json文件,其中包含以下菜单项:Json twitter引导ajax下拉列表,json,jquery,twitter-bootstrap,mustache,Json,Jquery,Twitter Bootstrap,Mustache,我正在尝试使用twitter引导构建一个动态菜单。 想法是加载一个json文件,其中包含以下菜单项: // test.json { "children": [ { "text": "Item1", "children": [ {"text": "Item11", "link": "/link11"}, {"text": "Item12", "link":"/link12"}, {"text": "Item13", "chi
// 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引导中静态呈现:
// 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
试验
-
-
-
-
-
-
-
-
-
-
我想向index.html添加如下函数:
<script type="text/javascript">
$(document).ready(function () {
$.getJSON('ajax/test.json', function(data) {
// get json, parse it and append to .nav
});
});
</script>
$(文档).ready(函数(){
$.getJSON('ajax/test.json',函数(数据){
//获取json,解析它并附加到.nav
});
});
我认为将json解析为无序列表的最佳方法是使用模板。
我试过了,但没有成功。
问题是由于下拉子菜单类使递归方法不一致
你有什么建议吗
提前谢谢我也有类似的问题。
以下是解决方案:我的JSON 下面是使用引导类生成下拉列表的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");
});
//加载JSON文件
$.getJSON('menu.json',函数(数据){
//构建菜单
var builddata=函数(){
var源=[];
var项目=[];
对于(i=0;i”+“”);
li.附属于(母公司);
如果(this.items&&this.items.length>0){
var ul=$(“ ”;
ul.附录(li);
buildUL(ul,本项目);
}
}
});
}
var source=builddata();
var ul=$(“.json菜单”);
ul.附录(“.json菜单”);
buildUL(ul,来源);
//添加引导类
if($(“.json菜单>li:has(ul.js菜单)”)
{
$(“.json菜单>li.js菜单”).addClass('dropdown-submenu');
}
如果($(“.json菜单>li>ul.js菜单>li:has(>ul.js菜单)”)
{
$(“.json menu>li>ul.js-menu li”).addClass('dropdown-submenu');
}
$(“ul.js菜单”).find(“li:not(:has(>ul.js菜单))).removeClass(“下拉子菜单”);
});
所以,您只需在“dropdown”bootsrap类附近添加“json菜单”类
<ul class="dropdown-menu json-menu">
</ul>
您可以看到实时示例每当我尝试实现此功能时,都会出现一个错误:“Uncaught HierarchyRequestError:未能在“Node”上执行“appendChild”:新的子元素包含父元素。“这不是将ul附加到自身吗?”?var ul=$(“.json菜单”);ul.附录(“.json菜单”);
<ul class="dropdown-menu json-menu">
</ul>