利用jQuery实现多条件分类筛选代码

利用jQuery实现多条件分类筛选代码
特效描述:利用jQuery实现 多条件分类 筛选代码,利用jQuery实现多条件分类筛选代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>

3. HTML代码

<div style="width:946px; margin:0 auto;">
    <div class="clearfix">
        <p class="shaixuan-tj floatLeft clearfix"> 
            <span><a href="">全部结果</a></span>
            <i class="icon-angle-right"></i>
            <span>领域</span>
            <i class="icon-angle-right"></i>
            <span>搜索关键词为<a href=""><strong>“####”</strong></a></span>
        </p>
        <p id="sxbtn" class="shaixuan-btn clearfix"><span><em>收起筛选</em><i class="icon-angle-up"></i></span></p>
    </div>
    <div id="page-search-store" class="mb10 border sxcon">
        <div class="search-by by-category relative">
            <dl class="relative clearfix">
                <dt class="floatLeft"><a href="">类别:</a></dt>
                <dd class="floatLeft show-con">
                    <a href="" class="">企业</a>
                    <a href="" class="">机构</a>
                    <a href="" class="">专家</a>
                    <a href="" class="">平台</a>
                    <a href="" class="nzw12">标准</a>
                    <a href="" class="">进口牛奶</a>
                    <a href="" class="">进口母婴用品</a>
                    <a href="" class="">进口零食</a>
                    <a href="" class="">进口冲调保健</a>
                    <a href="" class="">进口个人护理</a>
                    <a href="" class="">进口零食</a>
                    <a href="" class="">进口冲调保健</a>
                    <a href="" class="">进口个人护理</a>
                </dd>
                <dd class="floatLeft show-more"><h3 class="pointer clearfix"><span>更多</span><i class="icon-angle-down"></i></h3></dd>
            </dl>
            <dl class="relative clearfix" style="border-bottom:0">
                <dt class="floatLeft"><a href="">规格:</a></dt>
                <dd class="floatLeft show-con">
                    <a href="" class="">10-15吨</a>
                    <a href="" class="">20-25吨</a>
                </dd>
            </dl>
        </div>
    </div>
</div>
<script>
    $(function(){
        $(".shaixuan-tj span.crumb-select-item").live('hover',function(event){
            if(event.type=='mouseenter'){ 
            $(this).addClass("crumb-select-itemon");
            }else{ 
            $(this).removeClass("crumb-select-itemon");
            } 
        });
        $(".shaixuan-tj span.crumb-select-item").live('click', function(event){
            event.preventDefault();
            $(this).remove();
            var TTR = $(this).find("em").text();
            $(".show-con a").each(function(){
                var TT = $(this).text();
                    THI = $(this);
                    THIPP = $(this).parents("dl");
                if(TTR==TT){
                    THI.removeClass("nzw12");
                    THIPP.css("display","block");
                }
            })
        });
        $(".show-con a").click(function(event){
            event.preventDefault();
                 THIP = $(this).parents("dl");
            if($(this).hasClass("nzw12")){
            }else{
                $(this).addClass("nzw12");
                var zhiclass = $(this).parents("dd").siblings("dt").find("a").text();
                    zhicon = $(this).text();
                    tianjaneir="<span class='crumb-select-item'><a href=''><b>"+zhiclass+"</b><em>"+zhicon+"</em><i class='icon-remove'></i></a></span>"
                $(".shaixuan-tj").children().last().after(tianjaneir);
                THIP.css("display","none");
            }
        });
        $(".show-more").click(function(event){
            event.preventDefault();
            var ticon = $(this).find("i");
                tspan = $(this).find("span");
                if($(this).hasClass("zk")){
                    $(this).siblings(".show-con").css("height","30px");
                    ticon.removeClass("icon-angle-up");
                    ticon.addClass("icon-angle-down");
                    tspan.html("更多");
                    $(this).removeClass("zk")
                }else{
                    $(this).siblings(".show-con").css("height","auto");
                    ticon.removeClass("icon-angle-down");
                    ticon.addClass("icon-angle-up");
                    tspan.html("收起");
                    $(this).addClass("zk")
                }
        });
        $("#sxbtn").click(function(event){
            event.preventDefault();
            var xicon = $(this).find("span i");
                xspan = $(this).find("span em");
            if($(this).hasClass("zkon")){
                xspan.text("收起筛选");
                xicon.removeClass("icon-angle-down");
                xicon.addClass("icon-angle-up");
                $(".sxcon").slideDown();
                $(this).removeClass("zkon")
            }else{
                xspan.text("查看筛选");
                xicon.removeClass("icon-angle-up");
                xicon.addClass("icon-angle-down");
                $(".sxcon").slideUp();
                $(this).addClass("zkon")
            }
        })
    })
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到