jQuery多条件选择分类筛选代码

jQuery多条件选择分类筛选代码-精品资源网
jQuery多条件选择分类筛选代码
此内容为免费资源,请登录后查看
0
免费资源

jQuery多条件选择分类筛选代码

一款比较简单的jQuery多条件分类筛选代码,而且筛选框可以收缩展开,已选分类自动收缩起来,删除已选再度展开。

js代码

<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>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容