使用jquery创建菜单和子菜单_Jquery

使用jquery创建菜单和子菜单

jquery

使用jquery创建菜单和子菜单,jquery,Jquery,我想要的是循环数据库中的数据并创建菜单，如果菜单的每个内容具有子菜单，则子菜单将显示为： <ul> <li>test1</li> <li>test2</li> <li>test3 <ul> <li>sub menu1</li> <li>sub menu2</li> </ul> </li> <

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

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


测试1
测试2
测试3

子菜单1
次菜单2

我使用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>

$（文档）.ready（函数（）{
$.getJSON（url、函数（数据）{
$.each（数据、函数（索引、数据选项）{
$（“#navmenu-v”）.append（“
");
如果（dataOption.NumCat>0）{//NumCat是子菜单的数量
$（“#测试列表”）。追加（“测试类别””；
}
$（“#navmenu-v”）。追加（“”）；
});
});
});

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

谁能告诉我怎么做吗。非常感谢。


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

$（文档）.ready（函数（）{
变量数据=[{'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'，'ID'：'4，{'mcat'}；
如果（data.length>0）{
$（'content'）。追加（'ulid=“navmenu-v”>）；
$.each（数据、函数（索引、数据菜单）{
var stringBuilder=[]；
stringBuilder.push（“”）；
如果（dataMenu.NumCat.length>0）{//NumCat是子菜单的数量
stringBuilder.push（“”）；
$.each（dataMenu.NumCat，函数（i，dataSubmenu）{
stringBuilder.push（“”）；
//如果（dataMenu.NumCat.length>0）{//NumCat是子菜单的数量
//stringBuilder.push（“”）；
//$.each（dataMenu.NumCat，函数（i，dataSubmenu）{
//stringBuilder.push（“”+dataSubmenu.Name+”）；
//                            });
//stringBuilder.push（“”）；
//                        }
//stringBuilder.push（“”）；
//$（'#navmenu-v'）.append（stringBuilder.join（''）；
//                    });
//                }
//            });
});


$（文档）.ready（函数（）{
变量数据=[{'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'，'ID'：'4，{'mcat'}；
如果（data.length>0）{
$（'content'）。追加（'ulid=“navmenu-v”>）；
$.each（数据、函数（索引、数据菜单）{
var stringBuilder=[]；
stringBuilder.push（“”）；
如果（dataMenu.NumCat.length>0）{//NumCat是子菜单的数量
stringBuilder.push（“”）；
$.each（dataMenu.NumCat，函数（i，dataSubmenu）{
stringBuilder.push（“”）；
//如果（dataMenu.NumCat.length>0）{//NumCat是子菜单的数量
//stringBuilder.push（“”）；
//$.each（dataMenu.NumCat，函数（i，dataSubmenu）{
//stringBuilder.push（“”+dataSubmenu.Name+”）；
//                            });
//stringBuilder.push（“”）；
//                        }
//stringBuilder.push（“”）；
//$（'#navmenu-v'）.append（stringBuilder.join（''）；
//                    });
//                }
//            });
});

看一看这个在jquery中看一看这个未注释的代码仅用于测试目的。当您执行注释或删除它时。输出如下：

jquery中的子菜单1
子菜单2

未注释的代码仅用于测试目的。当您执行注释或删除它时。输出如下：

- 子菜单1
- 子菜单2