jQuery 分类浮层

var firstLevelGoodsData; //记录下方一级分类及对应的商品数据 下方ajax对其赋值

//根据传入的 分类信息和商品信息 和 li的catid，改变div#one内的数据
function writeGoods(firstLevelGoodsData,li_cat_id){
	  for(var key in firstLevelGoodsData){
		  
			if(key == li_cat_id ){
				var innerShopHtml = "";
				for(var order in firstLevelGoodsData[key] ){
					var c = firstLevelGoodsData[key][order];
					innerShopHtml+="<div class=\"imgdivshop\">"
					+"<div class=\"imgitemshop\" style=\"text-align:center\">"
					+"<a href=\"${contextPath}/view.do?id="+c.id+"\"><img class=\"imgshow lazyloading\" data-original=\""+c.imageDefault+"\" height=\"150px\" width=\"148px\" ></a>"
					+"<h1 style=\"text-decoration:line-through;font-size:15px;color:#BEBFC3\">￥"+c.price+"</h1>"
					+"<h1>￥"+c.factPrice+"</h1>"
					+"<a  href=\"${contextPath}/view.do?id="+c.id+"\" style=\" text-overflow: ellipsis;overflow:hidden;width:148px\">"+c.name+"</a><br>"
					+"</div></div>";	
					
					
				};
					$("div#one").append(innerShopHtml);
			};
		};
	  $("img.lazyloading").lazyload();

}

jQuery(function($){
	
	//获取一级分类及对应的商品信息
	$.ajax({
		  url: "${contextPath}/findfirstLevelGoods.do",
		  type:"GET",
		  cache:true,
		  success: function(data){
			  firstLevelGoodsData = data;
			  writeGoods(firstLevelGoodsData,$("div#depthMenu li:first").attr("catid"));
			  }
	});
	

$("li[divid=one]").mouseenter(function(){
	$("div#catFloat").remove();
	$("div#one").children().remove();//清空shop区的显示内容
	var p = $(this);
	$("div#one").attr("catid", $(p[0]).attr("catid") );
	
	writeGoods(firstLevelGoodsData,$(p[0]).attr("catid"));
	
	
	
	$("#depthMenu").append("<div id=\"catFloat\" style=\"min-height:51px;\"></div>");
	$("#catFloat").append("<div id=\"catFloatOne\" style=\"min-height:51px;\"></div>");
	$("#catFloatOne").width(300).css({
		'backgroundColor':'#ffdddd',
		"borderStyle":" none none none solid",
		"borderWidth":"0px 0px 0px 3px",
		"borderColor":"black",
		/* "padding-left":"5px", */
		"opacity":"0.92"
		
	});
	//对一级的浮层定位
	$("#catFloatOne").offset({top: p.offset().top ,left:p.offset().left+$($("#depthMenu li[divid=one]")[0]).outerWidth(true)});
	var innerHtml = "";
	$.ajax({
		  url: "${contextPath}/showTwoThreeCategory.do?catId="+$(p[0]).attr("catid")+"",
		  type:"GET",
		  cache:true,
		  success: function(data){
			  var two = data['two'];
			  var three = data['three'];
			  console.log(data);
			  for(var key in two ){
				  innerHtml += "<div class=\"twoHorizonLine\" >";
				  innerHtml += "<a class=\"twoTitle\" catId=\""+two[key]['id']+"\" href=\"category.do?id="+two[key]['id']+"\">"+two[key]['catName']+"</a>";
				  innerHtml += "<div class=\"threeBlock\" >";
			  	  for(var key2 in three ){
			  		  if(three[key2]['parent'] == two[key]['id']){
			  			innerHtml += "<a class=\"threeTitle\" catId=\""+three[key2]['id']+"\" href=\"category.do?id="+three[key2]['id']+"\">"+three[key2]['catName']+"</a>";
			  		  }
			  	  }
			  	innerHtml += "</div>";
			  	innerHtml += "</div>";
			  }
			  $("#catFloatOne").html(innerHtml);
			  
			  
			  $("a.twoTitle").css({//二级分类的css设置
				  "height":"41px",
				  "display":"inline-block",
				  "float":"left",
				  "fontSize":"14px",
				  "color":"black",
				  "fontWeight":"900",
				  "margin":"10px 5px 0 5px",
				  "overflow":"hidden",
			  });
			  $("a.threeTitle").css({//三级分类的css设置
				  "fontSize":"13px",
				  "color":"black",
				  "margin":"0 5px 0 5px"
			  });
			  $(".twoHorizonLine").css({//浮动分类框的横向div的css设置
				  "width":"100%",
			  	  "min-height":50,//$(p[0]).outerHeight(true)
			  	  "border-bottom":"1px solid black"
			  	  
			  });
			  $(".twoHorizonLine:last").css({
				  "border-bottom":"0 none",
				  "min-height":51
			  });
			  $(".threeBlock").css({
				  "padding-top":"5px"
			  });
		  }
		}); 

	

	 //鼠标从二级分类移走
	
	 $("#catFloat").mouseleave(function(){
		$("#catFloat").remove();
	}); 

});



    $("#depthMenu").mouseleave(function(){
	    $("#catFloat").remove();
   }); 

    $("img.lazyloading").lazyload();
  });

		<div class="container">
			<div class="title" style="float:left"><img src="${contextPath}/images/adleft.jpg" > 明星商城  | Star Mall<img src="${contextPath}/images/adright.jpg"> </div>
			 <div class="imgdiv" style="overflow:hidden;width: 100%;height: 150px;" id="showImgAd">
					<div class="showImg">
						<img style="width: 100%;height: 150px;" src="${contextPath}/images/aaa.jpg">
					</div>
					<div class="showImg">
						<img style="width: 100%;height:150px;" src="${contextPath}/images/bbb.jpg">
					</div>
				</div>
			<!-- <div class="hr1" style="width:1050px;margin-left: -30px"></div> -->
			
			<div id="depthMenu" class="depthMenu" style=" float: left;width:150px; margin-top: 8px;">
				<ul style="font-family: 微软雅黑;border:1px solid #dcdcdc; border-left: none;border-right:none; margin-left: -7px;margin-top:-2px; background-color: #f7f7f7;">
					<c:forEach items="${catlist}" var="cat">
					<li divId="one" catid="${cat.id}">${cat.catName}</li>
					</c:forEach>
				</ul>
			</div>
			 <div id="one" style="float: left;width:840px" >
			</div> 
		</div> 
		<div class="cut"></div>