从后台加载数据,结构为目录树二级菜单。
数据格式为:
html:<ul class="sidebar-menu" id="proMenu" style="background:#88A0CE;"></il>
JS:
var width = window.screen.availWidth * 0.9 - 15; //区域宽度
var n = parseInt(width / 130); //每行容纳图标数量
var margin = parseInt((width - 130 * n - 30) / (n + 1)) + 30; //动态计算间距
var margin = parseInt((width - 130 * n - 30) / (n + 1)) + 30; //动态计算间距
$.ajax({
type: 'post',
url: '/Index/getProTree',
dataType: 'json',
success: function (data) {
var text = "";
var num;
type: 'post',
url: '/Index/getProTree',
dataType: 'json',
success: function (data) {
var text = "";
var num;
for (var i = 0; i < data[0].children.length; i++) { //遍历一级菜单
num = data[0].children[i].children.length;
text += "<li class=\"nav-item\"><a href=\"javascript:;\"><span>" + data[0].children[i].text + "</span><i class=\"my-icon icon_26\"></i><b>共"+num+"项</b></a><ul class=\"projectlist\"> ";
for (var j = 0; j < num; j++) { //遍历二级菜单
text += "<li><a><img src=\"../images/station5.png\"/><p>" + data[0].children[i].children[j].text + "</p><i>" + data[0].children[i].children[j].id + "</i></a></li>";
}
text += "</ul></li>";
}
document.getElementById("proMenu").innerHTML = text; //将要添加的内容全赋给变量text,再将它整体赋值给ul
//设置 li 间距 注:JS的加载顺序。Ajax是异步加载,必须等Ajax加载完毕才能对动态添加的元素设置样式,否则获取不到元素。所以注意该设置方法放置的位置
$(".projectlist li").css("margin-top", margin + "px");
$(".projectlist li").css("margin-left", margin + "px");
$(".projectlist").css("padding-bottom", margin + "px");
$(".nav-item>ul:first").slideDown();//设置第一个站点展开
$(".nav-item:first-child").addClass('selected'); //为展开站点着色
}
});
$(".projectlist li").css("margin-top", margin + "px");
$(".projectlist li").css("margin-left", margin + "px");
$(".projectlist").css("padding-bottom", margin + "px");
$(".nav-item>ul:first").slideDown();//设置第一个站点展开
$(".nav-item:first-child").addClass('selected'); //为展开站点着色
}
});
效果:
JS捕获动态生成的元素:
$("上级元素").on("click", "目标元素", function() {});
如:
$("#proMenu").on("click", ".nav-item>a", function () {
//操作
})