對于分類來說，一般包括一級分類，二級分類，三級分類，一般2級分類是比較好做的，大部分網(wǎng)站都是左邊點(diǎn)擊二級分類，右邊顯示相對應(yīng)商品，這就要用到j(luò)query技術(shù)了。下面就來為大家詳細(xì)分析一下該如何實(shí)現(xiàn)吧。

　　首先把二級分類給全部遍歷出來，Html代碼如下：
<volist name='cate' id='vo'>
<li <if condition="$Think.get.name eq $vo['name']">class="active"</if> οnclick="funbrand('{$vo.name}','{$vo.id}')" ">
<span style="font-weight: 600;font-size: 13px;height: 45px; display: flex;justify-content: center;align-items: center;padding: 0;border-right: 5px solid white;" data="{$vo.id}" name="cateid" title="">{$vo.name}</span>
</li>
</volist>

根據(jù)需求添加點(diǎn)擊事件，寫jquery：
jquery代碼如下:
function funbrand(id,obj){
debugger;
$(obj).addClass('active');

$(obj).siblings('a').removeClass('active'); cateid=$("span[name='cateid']").attr('data');$('.all').removeClass('active'); var test=$('.all').attr('title'); var goodscateid = id;cate_id=$("input[name='cateid1']").val(); $('#id').val(goodscateid); var types = $('#type').val(); $.ajax({url:"{:U('Mobile/goods1')}",data:{goodscateid:goodscateid,types:types,cate_id:cate_id},dataType:"json",type:"post",success:function(data){alert(data.v);str = '';$('.good_list').empty();if (data.status==1) {$.each(data.shops,function(index,obj){str+='<dl class="clearfix">';if(test=='套餐'){str+='<dt class="col-sm-5 col-xs-5" style="text-align: center;margin-bottom:25px;margin-top:25px">';str+='<a style="color:#000;width:200px;overflow:hidden;" href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">';str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'" style="width:80%;margin-top:1rem;" class="img-responsive center-block"></em>';str+='<dd class="col-sm-7 col-xs-7" style="height:14rem;padding-top: 10px;"><div style="height:50px; overflow:hidden;"><h4 style="height: 30px; line-height: 10px; color:#000; ">'+obj.gname+'</h4></div><p style=" font-size:18px;"> .... </p><br/> <p class="money" style="margin-top:0px; margin-bottom:-10px; "><i>￥</i>'+obj.price+'</p><br>';}else{str+='<dt class="col-sm-5 col-xs-5" style="text-align: center;margin-bottom:8px;margin-top:8px">';str+='<a style="color:#000;width:200px;overflow:hidden;" href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">';str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'" style="width:80%;margin-top:1rem;" class="img-responsive center-block"></em>';str+='<span>'+obj.norms+'/'+obj.unity+'</span></a></dt>';str+='<dd class="col-sm-7 col-xs-7" style="height:14rem;padding-top: 10px;"> <h4 style="height: 30px; line-height: 15px; color:#000; ">'+obj.gname+'</h4> <p class="money" style="margin-top:30px; margin-bottom:-10px; "><i>￥</i>'+obj.price+'</p><br>';} if (obj.quota!='0') {str+=' <span style="border: 1px solid #c63731; padding:2px; color:#c63731;border-radius: 8px; font-size: 10px;">'str+='限購'+obj.quota+ obj.unity; str+='</span>';}if (obj.repertor==0) {if(test=='套餐'){str+=' <em title="'+obj.gid+'" class="addcar" att="'+obj.addnum+'" style="position:absolute;bottom:-15px;right:0px;">';str+='<img src="/Public/Mobile/images/add_cart.png" class="img-responsive" width="30" /></em>';}else{str+=' <em title="'+obj.gid+'" class="addcar" att="'+obj.addnum+'" style="position:absolute;bottom:5px;right:0px;">';str+='<img src="/Public/Mobile/images/add_cart.png" class="img-responsive" width="30" /></em>'; }}else{str+='<em>補(bǔ)貨中</em>'}str+=' </dd></dl>';})$('.good_list').append(str);$('.good_list').html(str).ready(function(){$(".addcar").click(function(){// debugger;var uid = $('#uid').val();var gid = $(this).attr('title');// var cnum = $(this).parent().find("input[class*=num_val]").val();// alert(uid);var cnum=$(this).attr('att');if (uid=='') {alert('請先登陸');location="{:U('Mobile/login')}";return false;}$.ajax({url:"{:U('Mobile/goods_info')}",data:{gid:gid},dataType:"json",type:"post",success:function(data){// alert(data);// alert(data.thumb);// $(".img").src('/Public/Admin/kindeditor-4.1.10/attached/image'+data.thumb);var thumb=data.thumb;var tep='/Public/Admin/kindeditor-4.1.10/attached/image'+thumb;$("#shopping_img").attr('src', src=tep) ;$('.mo_shopping_quota').text(data.quota);$('.mo_shopping_gid').text(data.gid);$(".title").text(data.gname);$(".shopping_gui").text(data.norms+'/'+data.unity);$('.shopping_money').text(data.price);$('.shelflife').text(data.shelflife);$('.mo_shopping_gid').text(data.gid); $('.mo_shopping_addnum').text(data.addnum);$(".mo_shopping").css("display","block");$('.num').val(data.addnum);}})})});}},})

}

Php查詢并輸出，代碼如下：
public function goods1(){
$goodscateid=I('goodscateid');
$cate_id=I('cate_id');
$where['brandid']=array('exp',"regexp '(,|^)" .'$cate_id'."(,|$)'");
// $where['bid']=$goodscateid;
// $info=M("brandlist")->where("bid=$goodscateid")->find();
$info=M("brandlist")->where($where)->select();
foreach ($info as $key => $value) {
$bname=$value['bname'];
$shops[] = M('goodsinfo')->where("brandlist='$bname'")->order("gid desc")->find();
}

foreach ($shops as $key => $value) {$pic=explode(",",substr($value['thumb'],1,strlen($value['thumb'])));$shops[$key]['thumb']=$pic[0]; } if ($shops) {$returnValue['status']=1;$returnValue['shops']=$shops;}else{$returnValue['status']=2;} $this->ajaxReturn($returnValue);

}

　　好了，現(xiàn)在大家已經(jīng)知道該怎么做了吧，那么如果還存在有疑問的，可以留言咨詢，我們可以共同討論，一起學(xué)習(xí)進(jìn)步。

　　本文由專業(yè)的鄭州app開發(fā)公司燚軒科技整理發(fā)布，原創(chuàng)不易，如需轉(zhuǎn)載請注明原文作者及出處!

轉(zhuǎn)載于:https://blog.51cto.com/13686158/2155421

總結(jié)

以上是生活随笔為你收集整理的实操：商品列表三级分类的实现方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。