纪念shop.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><link href="${contextPath}/css/shop/shop.css" type="text/css" rel="stylesheet"></link><script>function depthMenuSelect(menuItem){var select=menuItem.siblings(".chooseli");if(select[0]){select.removeClass("chooseli");var selectDiv=jQuery("#"+select.attr("divId"));if(selectDiv[0]){selectDiv.hide();}}var divId=menuItem.attr("divId");menuItem.addClass("chooseli");if(jQuery("#"+divId)[0]){jQuery("#"+divId).show();}}jQuery(function(){var depthMenu=jQuery("#depthMenu");depthMenu.find("UL>LI").each(function(i,ele){jQuery(ele).click(function(){var menuItem=jQuery(this);depthMenuSelect(menuItem);});});depthMenuSelect(depthMenu.find("UL>LI:first-child"));});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>"+c.price+"</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:37px;\"></div>");$("#catFloatOne").width(300).css({'backgroundColor':'#ffdddd',"borderStyle":" none none none solid","borderWidth":"0px 0px 0px 3px","borderColor":"black","padding-top":"14px","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}//showCategory.do?catId="+$(p[0]).attr("catid")+"",  type:"GET",  cache:true,  success: function(data){  for(var key in data){  innerHtml += "<a style=\"font-size:14px;margin:0 5px 0 5px;\" catId=\""+data[key]['id']+"\" href=\"showGoodsByCategory.do?id="+data[key]['id']+"\">"+data[key]['catName']+"</a>";  }  $("#catFloatOne").html(innerHtml);    //鼠标移动到链接上$("#catFloatOne").find("a").mouseenter(function(){$("#catFloatTwo").remove();var p2 = $(this);$("#catFloatOne").after("<div id=\"catFloatTwo\" style=\"min-height:37px;\"></div>");$("#catFloatTwo").width(300).css({'backgroundColor':'#ffdddd',"borderStyle":" none none none solid","borderWidth":"0px 0px 0px 3px","borderColor":"black","padding-top":"14px","padding-left":"5px","opacity":"0.88"});var catFloatOne = $("#catFloatOne");//对二级的浮层定位$("#catFloatTwo").offset({top: catFloatOne.offset().top+catFloatOne.outerHeight(true) ,left:catFloatOne.offset().left}); var innerHtmlTwo = "";$.ajax({  url: "${contextPath}//showCategory.do?catId="+$(p2[0]).attr("catId")+"",  type:"GET",  cache:true,  success: function(data){    for(var key in data){  innerHtmlTwo += "<a style=\"font-size:14px;min-width:60px;margin:0 5px 0 5px;\" href=\"showGoodsByCategory.do?id="+data[key]['id']+"\">"+data[key]['catName']+"</a>";  }  $("#catFloatTwo").html(innerHtmlTwo);      }});});    }});  //鼠标从二级分类移走$("#catFloat").mouseleave(function(){$("#catFloat").remove();});}); $("#depthMenu").mouseleave(function(){$("#catFloat").remove();}); $("img.lazyloading").lazyload();});</script><div class="container"><div class="title">————————————— 明星商城  | Star Mall ————————————</div><div style="margin-top: 8px;margin-bottom: 8px;"><img src="${contextPath}/images/ad.jpg" style="width: 100%;"></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>