創建菜單和子菜單使用jquery

我要的是循環從數據庫中的數據，並創建菜單，如果菜單的每個內容有子菜單，然後它會顯示子菜單：創建菜單和子菜單使用jquery

<ul> 
<li>test1</li> 
<li>test2</li> 
<li>test3 
    <ul> 
     <li>sub menu1</li> 
     <li>sub menu2</li> 
    </ul> 
</li> 
</ul>

我創建菜單與Jquery的，如下：

$(document).ready(function() { 
$.getJSON(url, function (data) { 
    $.each(data, function (index, dataOption) { 
     $("#navmenu-v").append("<li id='testList'> 
      <a href='javascript:void(0);' id='" + dataOption.ID + "'>" + 
        dataOption.Name + "</a>"); 
      if (dataOption.NumCat > 0) { //NumCat is the amount of sub menu 
       $("#testList").append("<ul><li><a>Testing cate</a></li></ul>"); 
      } 
     $("#navmenu-v").append("</li>"); 
    }); 
    }); 
    }); 

    <div id="content"> 
    <ul id='navmenu-v'> 

    </ul> 
    </div>

但「測試美食」只顯示在菜單的第一個列表。

請問誰能告訴我該怎麼做。非常感謝。

來源

2012-03-19 Nothing

看一看這個http://stackoverflow.com/questions/6034960/create-nested-ul-lists-from-data-object – titi 2012-03-19 03:26:59

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var data = [{ 'ID': 1, 'Name': 'A', 'NumCat': [{ 'ID': 1, 'Name': 'a' }, { 'ID': 2, 'Name': 'b' }, { 'ID': 3, 'Name': 'c'}] }, { 'ID': 2, 'Name': 'B', 'NumCat': [{ 'ID': 1, 'Name': 's'}] }, { 'ID': 3, 'Name': 'C', 'NumCat': [{ 'ID': 8, 'Name': 'r' }, { 'ID': 9, 'Name': 'y'}] }, { 'ID': 4, 'Name': 'D', 'NumCat': []}]; 

      if (data.length > 0) { 
       $('#content').append('<ul id="navmenu-v"></ul>'); 

       $.each(data, function (index, dataMenu) { 
        var stringBuilder = []; 
        stringBuilder.push('<li class="testList"><a href="javascript:void(0);" id="' + dataMenu.ID + '">' + dataMenu.Name + '</a>'); 

        if (dataMenu.NumCat.length > 0) { //NumCat is the amount of sub menu 
         stringBuilder.push('<ul>'); 
         $.each(dataMenu.NumCat, function (i, dataSubmenu) { 
          stringBuilder.push('<li><a>' + dataSubmenu.Name + '</a></li>'); 
         }); 
         stringBuilder.push('</ul>'); 
        } 

        stringBuilder.push('</li>'); 

        $('#navmenu-v').append(stringBuilder.join('')); 
       }); 
      } 



      // Or (Above is for testing...) 


      //   var url="/home/getmenulist"; // give u r url path here. 

      //   $.getJSON(url, function (data) { 
      //    if (data.length > 0) { 
      //     $('#content').append('<ul id="navmenu-v"></ul>'); 

      //     $.each(data, function (index, dataMenu) { 
      //      var stringBuilder = []; 
      //      stringBuilder.push('<li class="testList"><a href="javascript:void(0);" id="' + dataMenu.ID + '">' + dataMenu.Name + '</a>'); 

      //      if (dataMenu.NumCat.length > 0) { //NumCat is the amount of sub menu 
      //       stringBuilder.push('<ul>'); 
      //       $.each(dataMenu.NumCat, function (i, dataSubmenu) { 
      //        stringBuilder.push('<li><a>' + dataSubmenu.Name + '</a></li>'); 
      //       }); 
      //       stringBuilder.push('</ul>'); 
      //      } 

      //      stringBuilder.push('</li>'); 

      //      $('#navmenu-v').append(stringBuilder.join('')); 
      //     }); 
      //    } 
      //   }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="content"> 
    </div> 
</body> 
</html>

來源

2012-04-19 10:09:22 Thulasiram

jQuery中註釋掉的代碼僅用於測試目的。當你貶低評論或刪除它時。 – Thulasiram 2012-04-19 10:38:54

用於現場演示看到此鏈接：http://jsfiddle.net/nanoquantumtech/Pv5b8/ – Thulasiram 2012-04-19 10:41:44

輸出將是這樣的：

test1 test2 test3

子MENU1
子MENU2

– Thulasiram 2012-04-19 10:45:10

創建菜單和子菜單使用jquery

回答

相關問題