最近在做项目重构的主界面工作中，需要动态显示主菜单以及子菜单（各个界面的链接），查看原来老系统采用的是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 οnclick=alertText('" + data2[i].InterfaceName + "')>" + data2[i].InterfaceName + "</a></li>")}}}Index.Init();            });});
});</span>

ps:

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

运行后代码的拼接效果：

写在后面：

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

js动态加载div显示主菜单和子菜单+jquery获取动态id相关推荐

java做类似于qq空间动态加载_实现类似微博、QQ空间等的动态加载
微博.QQ空间等的动态加载方式属于滚屏加载技术,获取当前滚动条位置来触发onscroll()函数,向服务器发起请求,将请求得到的新的数据动态加载在页面上本文利用该原理实现了动态加载,但不是检测当前滚 ...
ajax动态加载div,JQuery/AJAX：使用动态内容加载外部DIV使用动态内容
我需要创建一个页面,使用Jquery和AJAX从外部页面加载div.JQuery/AJAX:使用动态内容加载外部DIV使用动态内容我遇到了一些很好的教程,但它们都是基于静态内容的,我的链接和内容是由 ...
ThreeJS动态加载div标签
思路: 1.在页面中创建一个div标签: 2.确定标签在三维场景中的三维位置: 3.计算三维位置的屏幕坐标: 4.在每一帧的渲染中都计算一下这个三维坐标的屏幕位置,并把屏幕位置赋给标签. 具体实现: ...
关于ajax如何异步动态加载table显示数据库内容
在做考勤系统的时候,需要将多条件查询的结果显示在同页面的table中,不用跳转页面.下面是效果图输入条件点击查询异步加载出数据库的内容. 1.写好html前台代码这里就是一个table的样式. & ...
java 动态加载ztree_JAVAEE——BOS物流项目02：学习计划、动态添加选项卡、ztree、项目底层代码构建...
1 学习计划 1.jQuery easyUI中动态添加选项卡 2.jquery ztree插件使用 n 下载ztree n 基于标准json数据构造ztree n 基于简单json数据构造ztree( ...
实现类似微博、QQ空间等的动态加载
微博.QQ空间等的动态加载方式属于滚屏加载技术,获取当前滚动条位置来触发onscroll()函数,向服务器发起请求,将请求得到的新的数据动态加载在页面上本文利用该原理实现了动态加载,但不是检测当前滚 ...
Python3 网络爬虫：漫画下载，动态加载、反爬虫这都不叫事
一.前言作者:Jack Cui 经过上两篇文章的学习,Python爬虫三步走:发起请求.解析数据.保存数据,已经掌握,算入门爬虫了吗? 不,还远远不够!只掌握这些,还只能算门外汉级别. 今天,就来带 ...
Python3网络爬虫：漫画下载，动态加载、反爬虫这都不叫事！
点击上方"Python爬虫与数据挖掘",进行关注回复"书籍"即可获赠Python从入门到进阶共10本电子书今日鸡汤十年磨一剑,霜寒未曾试.今日把君问 ...
从零开始学爬虫系列3：漫画下载，动态加载、反爬虫这都不叫事！
1 前言前文回顾: 从零开始学爬虫系列1:初识网络爬虫之夜探老王家从零开始学爬虫系列2:下载小说的正确姿势经过上两篇文章的学习,爬虫三步走:发起请求.解析数据.保存数据,已经掌握,算入门爬虫了吗 ...

js动态加载div显示主菜单和子菜单+jquery获取动态id