怎样将颜色放到递归中，让列表的背景色逐层递减？？？
<!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>
qq_sU_41回答
-
习惯受伤
先上图：你说的是这种效果吗？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); } } }另外看控制台测试结果：
随时随地看视频慕课网APP
Html/CSS
JavaScript
JQuery