twitter引導ajax下拉

我想用twitter引導建立一個動態菜單。的想法是加載一個JSON文件裏面的菜單項：twitter引導ajax下拉

// 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一個這樣的功能：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.getJSON('ajax/test.json', function(data) { 
     // get json, parse it and append to .nav 
     });  
}); 
</script>

I th將json解析爲無序列表的最佳方法是使用模板。我試過pure和mustache沒有成功。問題是由於dropdown-submenu類使遞歸方法不一致。

你有什麼建議嗎？

在此先感謝

來源

2013-04-02 marione

我有類似的問題。這裏是解決方案：

我的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" 
    }, 
...

這裏是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菜單」類近「下拉」 bootsrap類

<ul class="dropdown-menu json-menu"> 
</ul>

你可以看到活生生的例子here

來源

2013-06-07 13:55:32 Dmitry

每當我嘗試實現這個時，我得到一個錯誤：「Uncaught HierarchyRequestError：無法執行'節點'上的'appendChild'：新的子元素包含父節點。」這難道不會給自己增加一個ul嗎？ var ul = $（「。json-menu」）; 012.zip（「。json-menu」）; –

twitter引導ajax下拉

回答

相關問題