Question

我想要的是从数据库循环数据并创建菜单，如果菜单的每个内容有子菜单，然后它将子菜单显示为：

<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>

但“测试美食”仅显示在菜单的第一个列表中。

有人可以告诉我该怎么做。非常感谢。

Answer 1

<!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>

使用jquery创建菜单和子菜单

1 个答案: