最近在做项目重构的主界面工作中，需要动态显示主菜单以及子菜单（各个界面的链接），查看原来老系统采用的是asp控件，但是重构的时候采用mvc框架，而且这些菜单并不是死的，而是通过其他界面来配置的，主菜单和子菜单都是数据库查询显示。因此，就想到了动态的拼接div来实现效果。

要实现的效果图

实现步骤：

第一步，查询主菜单名称

第二步，查询具体界面名称

第三步，更具菜单ID实现主菜单和子菜单的匹配

实现思路：

每个主菜单一个div，主菜单下的子菜单为一个整体的div,每个具体子菜单为li。

代码实现：

<span style="font-family:KaiTi_GB2312;font-size:18px;">$(function () {
    $.post('/Main/QueryAllMenu', {}, function (data) {
        $.post('/Main/QueryAllInterface', {}, function (data2) {

            //添加的时候先清除div中的数据
            $("#menu-container").empty();
            //遍历向div中添加查询到的菜单
            for (var n = 0; n < data.length; n++) {
                var menuid = data[n].MenuID//子菜单div的动态id
                $("#menu-container").append(
                    "<div class=menu-tit id=MenuName index=" + n + "><input type=hidden  > " + data[n].MenuName + "</div><div class=menu-list ><div class=top-line></div><ul class=nav-items id=" + menuid + "></ul></div>"
                    )

                for (var i = 0; i < data2.length; i++) {
                    if (data[n].MenuID == data2[i].MenuID) {
                        $("#" + menuid + "").append(
                                            "<li><a href=" + data2[i].InterfacePath + " target=content id=WindowsName onclick=alertText('" + data2[i].InterfaceName + "')>" + data2[i].InterfaceName + "</a></li>")
                    }
                }
            }
            Index.Init();
        });
    });
});</span>

ps:

$("#"+id+"")获取动态id,所以上面$("#" + menuid + "")这句代码就容易理解了，动态获取菜单的id

运行后代码的拼接效果：

写在后面：

至此基本功能实现了，下一步实现菜单的滑动效果，我也写了自己的div的拼接，原来这么简单，还有很多功能值得我去学习，下篇博客介绍菜单滑动效果实现。