
一款比较简单的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>










暂无评论内容