已解決430363個問題，去搜搜看，總會有你想問的

怎樣將顏色放到遞歸中，讓列表的背景色逐層遞減？？？

首頁猿問怎樣將顏色放到遞歸中，讓列表的背景...

怎樣將顏色放到遞歸中，讓列表的背景色逐層遞減？？？

Html/CSS JavaScript JQuery

qq_sU_4 2017-02-17 10:34:43

<!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": "" } ? ? ? ?] ? ?}; ? ? ? ?$(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);
???????????}
???????}
???}

另外看控制臺測試結果：

1 反對回復 2017-02-19

qq_sU_4
有點區別，我指的是同一層級的用同一種顏色，層級越深，顏色越淺，麻煩改一下

回復 2017-02-20

1 回答
0 關注
2132 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

怎樣將顏色放到遞歸中，讓列表的背景色逐層遞減？？？

怎樣將顏色放到遞歸中，讓列表的背景色逐層遞減？？？

1 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

怎樣將顏色放到遞歸中，讓列表的背景色逐層遞減？？？

怎樣將顏色放到遞歸中，讓列表的背景色逐層遞減？？？

1 回答

相關問題推薦

添加回答

怎樣將顏色放到遞歸中，讓列表的背景色逐層遞減？？？

怎樣將顏色放到遞歸中，讓列表的背景色逐層遞減？？？