實現邏輯：

/ **
         *樹結構需要欄位
         * 1.樹鍵
         * 2.樹值
         * 3.點選對應的鍵展示對應的值
         *重點
         * 1.key和值有同一id
         * 2.value中有唯一的類提供給鑰匙點選後做事件使用
         * 
         * /

目錄書截圖：

程式碼

//新增頁面資訊
	var htmlAddinfo = function(data){
		var imageUrl = "../app/portal/component/CountryChose/resources/";
		var htmlStr = "";
		
		var htmlSpan = '<img style="height:26px;width:26px;line-height:30px;margin-right:10px;margin-left: 5px;float:left;" src="'+imageUrl+'l1.png">';
		htmlStr += '<div style="margin-top: 10px;width:80%;line-height:30px;position:absolute;cursor:pointer;">'
				+'<div class="treeFatherK" ids="000">'+htmlSpan+'基礎圖層</div>' //一級樹key
					+'<div class="treeFatherV c000" ids="000">'//外層div value
						+'<div class="treeSon">規劃範圍區域</div>'	
						+'<div class="treeSon">南流江工業區</div>'	//二級樹
						+'<div class="treeSon">南流江河流流經鄉鎮</div>'	//二級資料規劃範圍區域
					+'</div>'
				+'<div class="treeFatherK" ids="001">'+htmlSpan+'水專題</div>' //一級樹key
					+'<div class="treeFatherV c001" ids="001">'//一級樹value
						+'<div class="treeFatherK" ids="011">河流水系</div>'	//二級樹key
							+'<div class="treeFatherV c011" ids="011">'	//二級樹value
								+'<div class="treeSon">南流江河流水系</div>'	//三級樹
								+'<div class="treeSon">南流江水庫</div>'	//三級資料
								+'<div class="treeSon">南流江河流覆蓋面</div>'	//三級資料
								+'<div class="treeSon">北海河流分佈</div>'	//三級資料
							+'</div>'
						+'<div class="treeFatherK" ids="021">監測點位</div>'	//二級資料key
							+'<div class="treeFatherV c021" ids="021">'	//二級樹value
								+'<div class="treeSon">入河排汙口</div>'	//三級樹
								+'<div class="treeSon">監測斷面</div>'	//三級資料
							+'</div>'
					+'</div>'
			+'</div>';
		
		$("#topicpanel").empty().append(htmlStr);
		
		$(".treeFatherK").css({
			"margin-left":"30px",
			"border-bottom":"1px solid #D0D0D0"
		});
		$(".treeFatherV").css({
			"margin-left":"30px",
			"display":"none",
			//"border":"1px solid #D0D0D0"
		});
		$(".treeSon").css({
			"margin-left":"30px",
			"border-bottom":"1px solid #D0D0D0"
		});
		$("#topicpanel div").css({"background-color":"#F2F2F2"});
		$(".treeFatherK").click(function(){
			var textVal = $(this).attr("ids");
			if($(".c"+textVal).css("display") == "none"){
				$(".c"+textVal).css("display","block");
			}else{
				$(".c"+textVal).css("display","none");
			}
		});
		
		//執行其他事件
		htmlAddEvent();
	};