ajax商品目录分类联动,ul li 类型的三级联动（做商品类目使用）

作为一个前端和js非常非常菜的人，一度觉得我肯定写不出来这样子的效果，但是在生活的逼迫下，做到了。

大概的样子就是这个截图的样子了。

css部分

.selected{font-weight:bold; background: #009688; color:#fff;}

.banner ul li{width:32%;margin:0 auto;}

.banner ul li a{margin-left: 34%}

.banner ul li ul li{

border: 1px solid #e6e6e6;

padding: 2px 86px 2px 80px;

}

html部分代码

• 一级类目

  {foreach $cate_one_list as $c_one}

• {$c_one.name|default=''}

{/foreach}

二级类目

三级类目

主要是为了记录一下jq部分，以后有需要可以直接拿来用。

$(function(){

// 点击一级菜单时显示二级菜单

$(".second1>li").click(function(){

var cid1 = $(this).val();//点击的一级类目id

$(this).siblings('li').removeClass('selected'); // 删除其他兄弟元素的样式

$(this).addClass('selected'); //当前节点添加选中

/*清空二级三级菜单*/

$(".second2").find("li").remove();

$(".second3").find("li").remove();

/*二级菜单重新赋值*/

var two_cate = JSON.parse($("#c_two_list").val());

for(var i=0;i

if(two_cate[i]['fid'] === cid1){

$(".second2").append("

"+two_cate[i]['name']+"");

}

}

});

//点击二级菜单时显示三级菜单

$(document).on("click", ".second2 li", function() {

var cid2 = $(this).val();//点击的二级类目id

$(this).siblings('li').removeClass('selected'); // 删除其他兄弟元素的样式

$(this).addClass('selected'); //当前节点添加选中

/*清空三级菜单*/

$(".second3").find("li").remove();

/*三级级菜单重新赋值*/

var three_cate = JSON.parse($("#c_three_list").val());

for(var i=0;i

if(three_cate[i]['fid'] === cid2){

$(".second3").append("

"+three_cate[i]['name']+"");

}

}

});

//点击三级菜单时添加选中状态

$(document).on("click", ".second3 li", function() {

$(this).siblings('li').removeClass('selected'); // 删除其他兄弟元素的样式

$(this).addClass('selected'); //当前节点添加选中

$(this).attr('id',"check"); //三级节点添加id属性

});

//点击保存

$("#tijiao").click(function(){

/*获取当前选中的三级节点id*/

var check_cid = $("#check").val();

if(check_cid && check_cid != ""){

$("#cate_id").val(check_cid);

var a = $(window.parent.document).find("#add_data").attr("data-open");

var goods_id = $("#goods_id").val();

$(window.parent.document).find("#add_data").attr("data-open",a+"?cateid="+check_cid+"&goods_id="+goods_id);

layer.closeAll('page');

$(window.parent.document).find("#add_data").click();

return;

}else{

alert("请选择三级类目！");

return false;

}

});

});

记录一下，避免以后在遇到这种问题~