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' οnclick=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> |