商品列表筛选功能(完整功能)

html:

<div class="product-list-main">
	<ul class="product-list-wrap" id="ul_select">
	<li class="select-result">
	<dl id="dl_result" class="clearfix">
	<dd class="select-no"></dd>
	<dt><span id="clearAll">清空筛选</span></dt>
	</dl>
	</li>
	<li class="select-list">
	<dl id="select1" class="dl clearfix">
	<dt>品牌：</dt>
	<div class="fl">
	<dd><span>针织衫</span></dd>
	<dd><span>毛呢外套</span></dd>
	<dd><span>T恤</span></dd>
	<dd><span>羽绒服</span></dd>
	<dd><span>棉衣</span></dd>
	<dd><span>卫衣</span></dd>
	<dd><span>风衣</span></dd>
	</div>
	</dl>
	</li>
	<li class="select-list">
	<dl id="select2" class="dl clearfix">
	<dt>名称：</dt>
	<div class="fl">
	<dd><span>牛仔裤</span></dd>
	<dd><span>小脚/铅笔裤</span></dd>
	<dd><span>休闲裤</span></dd>
	<dd><span>打底裤</span></dd>
	<dd><span>哈伦裤</span></dd>
	<dd><span>小脚/铅笔裤</span></dd>
	<dd><span>牛仔裤</span></dd>
	<dd><span>小脚/铅笔裤</span></dd>
	<dd><span>休闲裤</span></dd>
	<dd><span>打底裤</span></dd>
	<dd><span>哈伦裤</span></dd>
	<dd><span>小脚/铅笔裤</span></dd>
	<dd><span>牛仔裤</span></dd>
	<dd><span>小脚/铅笔裤</span></dd>
	<dd><span>休闲裤</span></dd>
	<dd><span>打底裤</span></dd>
	<dd><span>哈伦裤</span></dd>
	<dd><span>小脚/铅笔裤</span></dd>
	</div>
	<div class="product-list-more"><i>更多</i><img src="images/more.png" alt=""></div>
	</dl>
	</li>
	<li class="select-list">
	<dl id="select3" class="dl clearfix">
	<dt>编号：</dt>
	<div class="fl">
	<dd><span>连衣裙</span></dd>
	<dd><span>半身裙</span></dd>
	<dd><span>长袖连衣裙</span></dd>
	<dd><span>中长款连衣裙</span></dd>
	<dd><span>连衣裙</span></dd>
	<dd><span>半身裙</span></dd>
	<dd><span>长袖连衣裙</span></dd>
	<dd><span>中长款连衣裙</span></dd>
	<dd><span>连衣裙</span></dd>
	<dd><span>半身裙</span></dd>
	<dd><span>长袖连衣裙</span></dd>
	<dd><span>中长款连衣裙</span></dd>
	</div>
	<div class="product-list-more"><i>更多</i><img src="images/more.png" alt=""></div>
	</dl>
	</li>
	<li class="select-list">
	<dl id="select4" class="dl clearfix">
	<dt>材质：</dt>
	<div class="fl">
	<dd><span>银</span></dd>
	<dd><span href="#">金</span></dd>
	<dd><span href="#">铜</span></dd>
	<dd><span href="#">45</span></dd>
	<dd><span href="#">金</span></dd>
	<dd><span href="#">铜</span></dd>
	<dd><span href="#">45</span></dd>
	<dd><span href="#">铜</span></dd>
	<dd><span href="#">45</span></dd>
	<dd><span href="#">金</span></dd>
	<dd><span href="#">铜</span></dd>
	<dd><span href="#">45</span></dd>
	<dd><span href="#">铜</span></dd>
	<dd><span href="#">45</span></dd>
	<dd><span href="#">金</span></dd>
	<dd><span href="#">45</span></dd>
	<dd><span href="#">金</span></dd>
	<dd><span href="#">铜</span></dd>
	<dd><span href="#">45</span></dd>
	<dd><span href="#">铜</span></dd>
	<dd><span href="#">45</span></dd>
	<dd><span href="#">金</span></dd>
	</div>
	<div class="product-list-more"><i>更多</i><img src="images/more.png" alt=""></div>
	</dl>
	</li>
	<li class="select-list">
	<dl id="select5" class="dl clearfix">
	<dt>规格：</dt>
	<div class="fl">
	<dd><span>45*10*60</span></dd>
	<dd><span>45*10*60</span></dd>
	<dd><span>45*10*60</span></dd>
	<dd><span>45*10*60</span></dd>
	<dd><span>休闲裤</span></dd>
	<dd><span>打底裤</span></dd>
	<dd><span>哈伦裤</span></dd>
	<dd><span>小脚/铅笔裤</span></dd>
	<dd><span>休闲裤</span></dd>
	<dd><span>打底裤</span></dd>
	<dd><span>小脚/铅笔裤</span></dd>
	<dd><span>休闲裤</span></dd>
	<dd><span>打底裤</span></dd>
	</div>
	<div class="product-list-more"><i>更多</i><img src="images/more.png" alt=""></div>
	</dl>
	</li>
	</ul>
	</div>

css:

.product-list-wrap{


}
.product-list-wrap li{
    list-style:none;
    line-height: 38px;
}
.product-list-wrap .select-result dt span{
    display: inline-block;
    width: 68px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    background-color: #158fd4;
    color: #ffffff;
    text-align: center;
}
.product-list-wrap .select-result span{
    margin-left: 0px;
    margin-right: 10px;
}
.product-list-wrap .select-list{
    border: 1px solid #d0d0d0;
    margin-bottom: -1px;
}
.product-list-wrap .select-list:last-child{
    border-bottom: 1px solid #d0d0d0;
}
.product-list-wrap dl{
    zoom:1;
    position:relative;
    line-height:24px;
}
.product-list-wrap dl:after{
    content:" ";
    display:block;
    clear:both;
    height:0;
    overflow:hidden
}
.product-list-wrap .select-list dt{
    /*width:100px;*/
    font-size: 14px;
    width: 60px;
    background-color: #ececec;
    color:#666;
    float: left;
    /*height: 38px;*/
    line-height: 38px;
    text-align: center;
}
.product-list-wrap dd{
    display:inline;
    height: 38px;
    line-height: 38px;


}
.product-list-wrap .select-list dl div.fl{
    width: 1055px;
    overflow: hidden;
    height: 38px;
}
.product-list-wrap div.product-list-more{
    position: absolute;
    top: 0px;
    right: 20px;
    width: 55px;
    height: 24px;
    border: solid 1px #d0d0d0;
    top: 6px;
    padding-left: 5px;
    cursor: pointer;
}
.product-list-wrap div.product-list-more img{
    margin-left: 5px;
}
.product-list-wrap span{
    cursor: pointer;
    display:inline-block;
    white-space:nowrap;
    margin: 0 20px 0px 10px;
    text-decoration:none;
    color: #333333;
}
.product-list-wrap .select-list span:hover{
    color: #158fd4;
}
#dl_result dd{
    float: left;
}


.select-result dt{
    display: inline-block;
    height: 38px;
    line-height: 38px;
}
.select-result dt span{


}
.select-no{
    color:#999;
    float: left;
}
.product-list-wrap .select-result dd span{
    display: inline-block;
    /*width: 115px;*/
    height: 24px;
    border: dashed 1px #158fd4;
    line-height: 24px;
    padding: 0px 5px;
}
.product-list-wrap .select-result dd span i:last-child{
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #158fd4;
    color: #FFFFFF;
    line-height: 12px;
    text-align: center;
    margin-left: 12px;
}


.product-list-wrap .select-result span i{
    font-size: 14px;
    color: #333333;
}
.product-list-wrap .select-result span:hover{
    background-position:right -14px;

}

js:

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
	/*商品列表内容区*/
	$(".product-list-more i").click(function(){
	var exp = this.innerHTML == '更多';
	this.innerHTML = exp?'收起':'更多';
	$(this).parent().parent().find(".fl").height(exp ? 'auto' : '38px');
	var setheight = $(this).parent().parent().children(".fl").innerHeight();
	$(this).parent().parent().find("dt").height(setheight);
	if (this.innerHTML == '更多') {
	$(this).parent().find("img").css("transform","rotate(0deg)")
	}else{
	$(this).parent().find("img").css("transform","rotate(180deg)")
	}
	})
	function removeChose(obj, index) { //删除筛选
	var _index = index++;
	$("#ul_select").children(".select-list").eq(index).find(".selected").removeClass("selected");//删除商品选中样式
	$("#ul_select").children(".select-list").eq(index).find("dl").text();
	$("#ul_select").children("li").eq(_index).show();
	obj.remove();//当前按钮删除
	getResult();
	}
	/*筛选全部删除*/
	$("#clearAll").click(function () {
	$(this).parent().parent().find("dd").remove()
	$("#ul_select").children(".select-list").show();
	})
	$(function() {
	$("#ul_select").find(".dl").find("div").children("dd").click(function() { //每个商品分类行绑定点击事件
	$(this).addClass("selected").siblings("dd").removeClass("selected"); //当前元素选中，其余删除选中样式
	var index = $(this).parents(".select-list").index();//获取父级索引index
	var propertyName = $(this).parent().parent().children("dt").text();//获取当前商品的属性
	$(this).parent().parent().parent().hide();
	var goods = $(this).children("span").text();//获取当前商品名称
	$("#select_" + index).remove();//删除当前索引的筛选
	if (goods != '全部') { //若不是全部 在筛选区域添加商品
	$("#dl_result").append("<dd id='select_" + index + "' class='selected' onclick=removeChose($(this),'" + index + "')><span><i>"+propertyName+"</i><i>" + goods + "</i><i>x</i></span></dd>");
	}
	getResult();
	})
	});
	function getResult() { //结果处理
	var len_chose = $("#dl_result").children(".selected").length;
	if (len_chose > 0) { //若是筛选区域选中项大于0
	$(".select-no").hide();//暂时没有选择过滤条件 隐藏
	} else {
	$(".select-no").show();//暂时没有选择过滤条件 显示
	}
	}
	</script>