商城手机筛选特效

1、新建html文档。

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>

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>

7、查看效果。