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>
版权声明:本文为博主原创文章,未经博主允许不得转载。