php,jquery > 树枝状 ajax 加载数据或隐藏数据

<div id="main_2">
	<div class="content_header">
		ssss
	</div>
	<div class="content_box">
		<div class="content_box_title">			
			商品列表			
			<a href="javascript:dialog(400,210,'<?PHP echo site_url(); ?>/main/add_pro/1');" class="btn">+ 增加</a>
		</div>
		<?PHP foreach($root_pat_pro as $list): ?>
		<div class="content_box_list pro_list root_<?PHP echo $list->id; ?> range_0" alt="0" title="<?PHP echo $list->id; ?>" >
			<a href="javascript:opList(<?PHP echo $list->id; ?>);" title="展开" alt="1" class="list_show_<?PHP echo $list->id; ?>"><img src="<?PHP echo base_url(); ?>images/pro_list_show.png" class="map_btn" /></a>
			<a href="<?PHP echo site_url().'/fun/del_area/'.$list->id; ?>" title="区域坐标" ><img src="<?PHP echo base_url(); ?>images/map.png" class="map_btn" /></a>
			<a href="javascript:dialog(400,210,'<?PHP echo site_url().'/main/add_pro/'.$list->id; ?>');" title="添加子商品"><img src="<?PHP echo base_url(); ?>images/add.png" class="add_btn" /></a>
			<a href="<?PHP echo site_url().'/fun/del_pro/'.$list->id; ?>"  title="删除" onclick="{if(confirm('删除后将删除掉改商品类的所有子商品,确定删除?')){return true;}return false;}" ><img src="<?PHP echo base_url(); ?>images/delete.png" class="del_btn" /></a>
							
			<a href="javascript:dialog(400,210,'<?PHP echo site_url().'/main/add_pro/'.$list->pat.'/'.$list->id; ?>');"><?PHP echo $list->name; ?></a>
		</div>
		<?PHP endforeach; ?>
		<div class="content_box_footer">
			&nbsp;
		</div>		
	</div>
</div>

<script language="javascript">
<!--
	
	
	var doArr = [];
	var doArrLen = 0;
	var doneArrlen = 0;

	
	function opList(this_pat){
		var level = $(".root_"+this_pat).attr('alt');
		var this_list_show = $(".list_show_"+this_pat).attr('alt');
		if(this_list_show == '0'){
			$(".list_show_"+this_pat).attr('alt','1');
			$(".list_show_"+this_pat+" img").attr('src','<?PHP echo base_url(); ?>images/pro_list_show.png');
		   var h_start = false;
		    jQuery(".pro_list").each(function(){
		    	if(this_pat == parseInt($(this).attr('title'))){
		    		h_start = true;	
		    		return true;
		    	}
		    	if(h_start == true && parseInt($(this).attr('alt')) > level){
		    		$(this).remove();	
		    		return true;
		    	}
		    	if(h_start == true && parseInt($(this).attr('alt')) <= level){
		    		h_start =false;	
		    		return false;
		    	}
		        //.................
		    });			
		}else{
			$(".list_show_"+this_pat).attr('alt','0');
			$(".list_show_"+this_pat+" img").attr('src','<?PHP echo base_url(); ?>images/pro_list_hide.png');
			loadSons(this_pat);
		}
	}
	
	function loadSons(this_pat){


		var range = parseInt($(".root_"+this_pat).attr('alt'));
		range = range+1;
		$.ajax({
			type: "get",
			dataType: "json",
			url: "<?PHP echo site_url(); ?>/fun/get_sons/"+this_pat,
			complete :function(){
				if(doneArrlen < doArrLen){
					loadSons(doArr[doneArrlen]);
					doneArrlen++;
				}
			},
			success: function(data){
				if(data == '' || data == null){
					
				}else{
					var right_video_html = '';
					var left_video_html = '';
					var out_html = '';
					$.each(data, function(i,val){  //each = foreach, i= $key, val = $value    
						out_html +='<div class="content_box_list pro_list root_'+val.id+'  range_'+range+'" alt="'+(range)+'" title="'+val.id+'">';
						out_html +='<a href="javascript:opList('+val.id+');" title="展开" alt="1" class="list_show_'+val.id+'"><img src="<?PHP echo base_url(); ?>images/pro_list_show.png" class="map_btn" /></a>';
						out_html +='<a href="<?PHP echo site_url(); ?>/fun/del_area/'+val.id+'" title="区域坐标" ><img src="<?PHP echo base_url(); ?>images/map.png" class="map_btn" /></a>';
						out_html +='<a href="javascript:dialog(400,210,\'<?PHP echo site_url(); ?>/main/add_pro/'+val.id+'\');" title="添加子商品"><img src="<?PHP echo base_url(); ?>images/add.png" class="add_btn" /></a>';
						out_html +='<a href="<?PHP echo site_url(); ?>/fun/del_pro/'+val.id+'"  title="删除" onclick="{if(confirm(\'删除后将删除掉改商品类的所有子商品,确定删除?\')){return true;}return false;}" ><img src="<?PHP echo base_url(); ?>images/delete.png" class="del_btn" /></a>';
							
						out_html +=' <a href="javascript:dialog(400,210,\'<?PHP echo site_url(); ?>/main/add_pro/'+val.pat+'/'+val.id+'\');">'+val.name+'</a>';
						out_html +='</div>';
							
					});

				//\
				}
				$(".root_"+this_pat).after(out_html);	
				
			},
			error:function(){
			
			}

		});
	}
	$(document).ready(function(){
		<?PHP 
			if($pats != ''){				
				$pats_a = explode('|',$pats);
				$x = 0;
				$doarr = '[';
				foreach($pats_a as $pats_l){
					if($pats_l != '' && $pats_l != '1'){						
						if($x == 0){
							$firstPat = $pats_l;
						}else{
							$doarr .= $pats_l.',';
						}
						$x++;						
					}
				}
				$doarr = substr($doarr, 0, -1).']';
				if($doarr == ']'){
					$doarr = '""';	
				}
				
				echo '
					doArr = '.$doarr.';
					doArrLen = '.$x.';
					doneArrlen = 0;	
					loadSons('.$firstPat.');		
				';
			
			}
		?>
	});
	
//-->
</script>
 
</body>
</html>

css

*{
	margin:0px;
	padding:0px;
	border:0 none;
	text-decoration:none;
}
html,body{
    font-size: 12px;
	width:100%;
	height:100%;
}
ul{
	list-style:none;
}
.cls{
	clear:both;
}
.left{
	float:left;	
}
.right{
	float:right;	
}
.input_text{
	border:1px solid #aaa;
	padding:3px;
	color:#333;
}
.btn{
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border:1px solid #426300;
	padding:4px 8px;
	background:#669900;
	color:#fff;
	cursor: pointer;
}
#dialog{
	background:#fff;	
}
#dialog_body{
	padding:10px;	
}
.del_btn,.add_btn,.map_btn{
	vertical-align:middle;	
	width:20px;
}
.del_btn:hover{
	background:red;	
}
.add_btn:hover{
	background:green;		
}
.map_btn:hover{
	background:orange;		
}
#dialog_body table tr td{
	border-bottom:1px solid #efefef;
	padding:10px 0px;	
}
.btn:hover{
	background:#496e00;
}

#main_1{
	overflow:hidden;
	height:100%;
	float:left;
	background: #b0bec7; 
	width: 20%; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
	-moz-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
	box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
}

#main_2{
	height:100%;
	width:80%;
	float:left;
	background:#e6eaed;
	white-space: nowrap;
	word-break: keep-all;
}
#main_2 .content_header{
	padding:12px 0px 12px 12px;
	background:#e8e8e8;
	font-size:14px;
	font-weight:bold;
	color:#444;
	border:1px solid #aaa;
	border-left:0 none;
	border-right:0 none;
}
.content_box {
	padding:15px;	

}

.content_box .content_box_title{
	background:#b2c1cb;
	padding:20px 0px 10px 10px;	
	-moz-border-radius-topright: 8px; 
	-webkit-border-top-right-radius: 8px; 
	border-top-right-radius: 8px;	
	-moz-border-radius-topleft: 8px; 
	-webkit-border-top-left-radius: 8px; 
	border-top-left-radius: 8px;		
}
.content_box .content_box_footer{
	background:#b2c1cb;
	padding:3px;	
	border:1px solid #b2c1cb;
	-moz-border-radius-bottomright: 8px; 
	-webkit-border-bottom-right-radius: 8px; 
	border-bottom-right-radius: 8px;	
	-moz-border-radius-bottomleft: 8px; 
	-webkit-border-bottom-left-radius: 8px; 
	border-bottom-left-radius: 8px;		
}
.content_box .content_box_list{
	padding:10px;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}
.content_box .content_box_list a:hover{
	text-decoration:underline;	
}
.content_box .content_box_list:hover{
	background:#fffad6;	
}
.content_box .a0{
	background:#fff;	
}
.content_box  .a1{
	background:#f0f4f7;	
}
.content_box .content_box_list a{
	color:#0073C1;
}
.pro_list{
	background:#fff;
	border-bottom:1px dashed #aaa;	
	
}

#dilog{
	display:none;
	background:url('../images/loading.gif') no-repeat center center #fff;
	position:absolute;	
	border:10px solid #555;
	-webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
	-moz-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
	box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;	
	top:50px;
	
}
#dilog_in{
	position:relative;	
}
#dilog .close_dialog{
	position:absolute;
	right:-40px;
	top:-40px;	
	width:50px;
	height:50px;
}


/* range class */
.range_1{padding-left:20px !important;}
.range_2{padding-left:40px !important;}
.range_3{padding-left:60px !important;}
.range_4{padding-left:80px !important;}
.range_5{padding-left:100px !important;}
.range_6{padding-left:120px !important;}
.range_7{padding-left:140px !important;}
.range_8{padding-left:160px !important;}
.range_9{padding-left:180px !important;}
.range_10{padding-left:200px !important;}
.range_11{padding-left:220px !important;}
.range_12{padding-left:240px !important;}
.range_13{padding-left:260px !important;}
.range_14{padding-left:280px !important;}
.range_15{padding-left:300px !important;}
.range_16{padding-left:320px !important;}
.range_17{padding-left:340px !important;}
.range_18{padding-left:360px !important;}
.range_19{padding-left:380px !important;}
.range_20{padding-left:400px !important;}
.range_21{padding-left:420px !important;}
.range_22{padding-left:440px !important;}
.range_23{padding-left:460px !important;}
.range_24{padding-left:480px !important;}
.range_25{padding-left:500px !important;}
.range_26{padding-left:520px !important;}
.range_27{padding-left:540px !important;}
.range_28{padding-left:560px !important;}
.range_29{padding-left:580px !important;}
.range_30{padding-left:600px !important;}
.range_31{padding-left:620px !important;}
.range_32{padding-left:640px !important;}
.range_33{padding-left:660px !important;}
.range_34{padding-left:680px !important;}
.range_35{padding-left:700px !important;}
.range_36{padding-left:720px !important;}
.range_37{padding-left:740px !important;}
.range_38{padding-left:760px !important;}
.range_39{padding-left:780px !important;}
.range_40{padding-left:800px !important;}
.range_41{padding-left:820px !important;}
.range_42{padding-left:840px !important;}
.range_43{padding-left:860px !important;}
.range_44{padding-left:880px !important;}
.range_45{padding-left:900px !important;}
.range_46{padding-left:920px !important;}
.range_47{padding-left:940px !important;}
.range_48{padding-left:960px !important;}
.range_49{padding-left:980px !important;}
.range_50{padding-left:1000px !important;}