<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script></head><body><div id="div_menu"></div><script> var menulist = { "menulist": [ { "MID": "M001", "MName": "首页", "Url": "#", "menulist": "" }, { "MID": "M002", "MName": "车辆买卖", "Url": "#", "menulist": [ { "MID": "M003", "MName": "新车", "Url": "#", "menulist":""}, { "MID": "M004", "MName": "二手车", "Url": "#", "menulist": "" }, { "MID": "M005", "MName": "改装车", "Url": "#", "menulist": "" } ] }, { "MID": "M006", "MName": "宠物", "Url": "#", "menulist": "" } ] }; <!--js Code--> $(function () { var showlist = $("<ul></ul>"); showall(menulist.menulist, showlist); $("#div_menu").append(showlist); });var color="#ddd"; //menu_list为json数据 //parent为要组合成html的容器 function showall(menu_list, parent) { for (var i in menu_list) { //如果有子节点，则遍历该子节点 if (menu_list[i].menulist.length > 0) { //创建一个子节点li var li = $("<li></li>"); //将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中 $(li).append(menu_list[i].MName).append("<ul></ul>").appendTo(parent); //将空白的ul作为下一个递归遍历的父亲节点传入 showall(menu_list[i].menulist, $(li).children().eq(0)); } //如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中 else { $("<li></li>").append(menu_list[i].MName).appendTo(parent); } } }</script></body></html>
1 回答
习惯受伤
TA贡献885条经验 获得超1144个赞
先上图：
你说的是这种效果吗？
CODE:
var color="#fff";
//获取一个当前颜色的浅一个色的颜色
var getLighterColor= function(c){
var colorString = c.replace(/#/,'');//删除颜色种的#
var colorAscii = [];
for(var _c in colorString){
var ascii = colorString[_c].charCodeAt() - 1;//这里递减计算
if(ascii > 57 && ascii <= 97){ //如果色值小于 'a' 那么颜色值就从'9'开始，
ascii = 57 - (97-ascii);
} else if(ascii < 48){ //如果色值小于0，从'f'开始
ascii = 102 - (48-ascii);
}
colorAscii.push(ascii);
}
colorString = [];
//将每一个 ascii 码，转化成字符重新拼接
for(var a in colorAscii){
colorString.push(String.fromCharCode(colorAscii[a]));
}
//还原色值
colorString = "#"+colorString.join('');
console.log(c + "==>" + colorString);
return colorString;
}
//menu_list为json数据
//parent为要组合成html的容器
function showall(menu_list, parent) {
for (var i in menu_list) {
color = getLighterColor(color);
//如果有子节点，则遍历该子节点
if (menu_list[i].menulist.length > 0) {
//创建一个子节点li
var li = $("<li></li>");
//将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中
$(li).append(menu_list[i].MName).append("<ul></ul>").css({"background-color":color}).appendTo(parent);
//将空白的ul作为下一个递归遍历的父亲节点传入
showall(menu_list[i].menulist, $(li).children().eq(0));
}
//如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中
else {
$("<li></li>").append(menu_list[i].MName).css({"background-color":color}).appendTo(parent);
}
}
}另外看控制台测试结果：
添加回答
举报
0/150
提交
取消