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

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

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數(shù)據(jù) ? ?//parent為要組合成html的容器 ? ?function showall(menu_list, parent) { ? ? ? ?for (var i in menu_list) { ? ? ? ? ? ?//如果有子節(jié)點(diǎn)，則遍歷該子節(jié)點(diǎn) ? ? ? ? ? ?if (menu_list[i].menulist.length > 0) { ? ? ? ? ? ? ? ?//創(chuàng)建一個(gè)子節(jié)點(diǎn)li ? ? ? ? ? ? ? ?var li = $("<li></li>"); ? ? ? ? ? ? ? ?//將li的文本設(shè)置好，并馬上添加一個(gè)空白的ul子節(jié)點(diǎn)，并且將這個(gè)li添加到父親節(jié)點(diǎn)中 ? ? ? ? ? ? ? ?$(li).append(menu_list[i].MName).append("<ul></ul>").appendTo(parent); ? ? ? ? ? ? ? ?//將空白的ul作為下一個(gè)遞歸遍歷的父親節(jié)點(diǎn)傳入 ? ? ? ? ? ? ? ?showall(menu_list[i].menulist, $(li).children().eq(0)); ? ? ? ? ? ?} ? ? ? ? ? ?//如果該節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則直接將該節(jié)點(diǎn)li以及文本創(chuàng)建好直接添加到父親節(jié)點(diǎn)中 ? ? ? ? ? ?else { ? ? ? ? ? ? ? ?$("<li></li>").append(menu_list[i].MName).appendTo(parent); ? ? ? ? ? ?} ? ? ? ?} ? ?}</script></body></html>

查看完整描述

1 回答

習(xí)慣受傷

TA貢獻(xiàn)885條經(jīng)驗(yàn) 獲得超1144個(gè)贊

先上圖：

你說的是這種效果嗎？

CODE:

????var?color="#fff";??
???//獲取一個(gè)當(dāng)前顏色的淺一個(gè)色的顏色
???var?getLighterColor=?function(c){
		var?colorString?=?c.replace(/#/,'');//刪除顏色種的#
		var?colorAscii?=?[];
		for(var?_c?in?colorString){
			var?ascii?=?colorString[_c].charCodeAt()?-?1;//這里遞減計(jì)算
			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?=?[];
		//將每一個(gè)?ascii?碼，轉(zhuǎn)化成字符重新拼接
		for(var?a?in?colorAscii){
			colorString.push(String.fromCharCode(colorAscii[a]));
		}
		//還原色值
		colorString?=?"#"+colorString.join('');
		console.log(c?+?"==>"?+?colorString);
		return?colorString;
???}
???
???//menu_list為json數(shù)據(jù)
???//parent為要組合成html的容器
???function?showall(menu_list,?parent)?{
???????for?(var?i?in?menu_list)?{
		????color?=?getLighterColor(color);
			
???????????//如果有子節(jié)點(diǎn)，則遍歷該子節(jié)點(diǎn)
???????????if?(menu_list[i].menulist.length?>?0)?{
???????????????//創(chuàng)建一個(gè)子節(jié)點(diǎn)li
???????????????var?li?=?$("<li></li>");
???????????????//將li的文本設(shè)置好，并馬上添加一個(gè)空白的ul子節(jié)點(diǎn)，并且將這個(gè)li添加到父親節(jié)點(diǎn)中
???????????????$(li).append(menu_list[i].MName).append("<ul></ul>").css({"background-color":color}).appendTo(parent);
???????????????//將空白的ul作為下一個(gè)遞歸遍歷的父親節(jié)點(diǎn)傳入
???????????????showall(menu_list[i].menulist,?$(li).children().eq(0));
???????????}
???????????//如果該節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則直接將該節(jié)點(diǎn)li以及文本創(chuàng)建好直接添加到父親節(jié)點(diǎn)中
???????????else?{
???????????????$("<li></li>").append(menu_list[i].MName).css({"background-color":color}).appendTo(parent);
???????????}
???????}
???}

另外看控制臺(tái)測試結(jié)果：

1 反對(duì) 回復(fù) 2017-02-19

qq_sU_4
有點(diǎn)區(qū)別，我指的是同一層級(jí)的用同一種顏色，層級(jí)越深，顏色越淺，麻煩改一下

回復(fù) 2017-02-20

1 回答
0 關(guān)注
2124 瀏覽

關(guān)注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

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

1 回答

相關(guān)問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

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

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

1 回答

相關(guān)問題推薦

添加回答

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

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