商城手机筛选特效

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<div class="selectNumberScreen">

<div id="selectList" class="screenBox screenBackground">

<dl class="listIndex" attr="terminal_brand_s">

 <dt>品　　牌：</dt>

 <dd>

 <a href="#">小米</a>

 <a href="#">华为</a> 

 <a href="#">联想</a> 

 <a href="#" >中兴</a> 

 <a href="#">夏新</a> 

 <a href="#">海信</a> 

 <span class=more><label>更多</label><em class=open></em></span> </dd>

</dl>

<dl class="listIndex" attr="价格范围">

 <dt>价格范围：</dt>

 <dd><a href="#">1-499</a> 

 <a href="#">500-999</a>

 <a href="#">1000-1999</a>

 <a href="#">2000-2999</a>

 <a href="#">3000-4999</a>

 <a href="#">5000以上</a></dd>

</dl>

<dl class=" listIndex" attr="terminal_os_s">

 <dt>操作系统：</dt>

 <dd><a href="#">ios</a> 

 <a href="#">安卓</a> 

 <a href="#">塞班</a>

 <a href="#">百度易平台</a></dd>

</dl>

<dl class=" listIndex" attr="terminal_activity_s">

 <dt>优惠活动：</dt>

 <dd><a href="#">存话费送手机</a>

 <a href="#" >买手机送话费</a>

 <a href="#" >只买手机</a> </dd>

</dl>

<dl class="noBorder listIndex" attr="terminal_sellFeature_s">

 <dt>特　　点：</dt>

 <dd><a href="#">双卡双待</a>

 <a href="#">千元智能机</a>

 <a href="#">大屏（4.0寸以上） </a></dd>

</dl>

</div>

<div class="hasBeenSelected">

<dl>

 <dt>您已选择：</dt>

 <dd style="DISPLAY: none" class=clearDd>

 <div class=clearList></div>

 <div style="DISPLAY: none" class="eliminateCriteria">清除筛选条件</div>

</dl>

</div>

</div>

4、书写css代码。

input,button{margin:0;font-size:12px;vertical-align:middle;}

body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; }

table{border-collapse:collapse;border-spacing:0;}

a{ color:#333; text-decoration:none;}

a:hover{ text-decoration:none;}

.selectNumberScreen{ width:795px; height:240px; margin:20px auto;}

.screenBox dl {border-bottom: #e6e6e6 1px dashed; width: 768px; overflow: hidden}

.screenBox dl.noborder {border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px}

.screenBox dl.goodstype {border-bottom: #e6e6e6 1px dashed}

.screenBox dl dt {float: left; height: 30px}

.screenBox dl dt {text-align: right; width: 100px; height: 22px; font-weight: 600; padding-top: 8px}

.screenBox dl dd {position: relative; padding-bottom: 5px; padding-left: 0px; width: 620px; padding-right: 48px; float: left; height: 25px; overflow: hidden; padding-top: 0px}

.screenBox dl dd a {line-height: 14px; margin: 9px 25px 0px 0px; display: inline-block; color: #36c; overflow: hidden; text-decoration: none}

.screenBox dl dd a:hover {background: #39c; color: #fff}

.screenBox dl dd a.selected {background: #39c; color: #fff}

.screenBox dl dd span.more {position: absolute; width: 39px; display: block; height: 14px; top: 6px; cursor: pointer; right: 1px}

.screenBox dl dd span.more label {display: inline-block; cursor: pointer}

.hasBeenSelected {border: #b2d1ff 1px solid;padding:2px;width: 784px; margin-top: 10px; overflow: hidden;}

.hasBeenSelected dl {width: 784px; background: #f6f8fd; overflow: hidden}

.hasBeenSelected dl dt {float: left}

.hasBeenSelected dl dd {float: left}

.hasBeenSelected dl dt {text-align: right; line-height: 30px; width: 108px; height: 30px; font-weight: 600}

.hasBeenSelected dl dd {padding-bottom: 4px; padding-left: 0px; width: 676px; padding-right: 0px; padding-top: 0px}

.selectedInfor {border-bottom: #f60 1px solid; position: relative; border-left: #f60 1px solid; padding-bottom: 1px; margin: 4px 10px 0px 0px; padding-left: 5px; padding-right: 17px; display: block; white-space: nowrap; background: #fff; float: left; height: 17px; border-top: #f60 1px solid; border-right: #f60 1px solid; padding-top: 1px}

.selectedInfor label {color: #f60}

.eliminateCriteria {line-height: 21px; margin-top: 4px; width: 80px; float: left; color: #f60; cursor: pointer; font-weight: 600}

.selectedInfor em {background: url("../images/close.gif") no-repeat;cursor: pointer;display: block;height: 13px;overflow: hidden;position: absolute;right: 2px;top: 3px;width: 13px;}

5、书写并添加js代码。

<script>

    var dlNum  =$("#selectList").find("dl");

    for (i = 0; i < dlNum.length; i++) {

        $(".hasBeenSelected .clearList").append("<div class=\"selectedInfor selectedShow\" style=\"display:none\"><span></span><label></label><em></em></div>");

    }

    

    var refresh = "true";

    

    $(".listIndex a ").live("click",function(){

        var text =$(this).text();

        var selectedShow = $(".selectedShow");

        var textTypeIndex =$(this).parents("dl").index();

        var textType =$(this).parent("dd").siblings("dt").text();

        index = textTypeIndex -(2);

        $(".clearDd").show();

        $(".selectedShow").eq(index).show();

        $(this).addClass("selected").siblings().removeClass("selected");

        selectedShow.eq(index).find("span").text(textType);

        selectedShow.eq(index).find("label").text(text);

        var show = $(".selectedShow").length - $(".selectedShow:hidden").length;

        if (show > 1) {

            $(".eliminateCriteria").show();

        }

       

    });

    $(".selectedShow em").live("click",function(){

        $(this).parents(".selectedShow").hide();

        var textTypeIndex =$(this).parents(".selectedShow").index();

        index = textTypeIndex;

        $(".listIndex").eq(index).find("a").removeClass("selected");

        

        if($(".listIndex .selected").length < 2){

            $(".eliminateCriteria").hide();

        }

    });

    

    $(".eliminateCriteria").live("click",function(){

        $(".selectedShow").hide();

        $(this).hide();

        $(".listIndex a ").removeClass("selected");

    }); 

</script>

6、代码整体结构。

7、查看效果。