1.伸缩栏内容
<div class="gao_fourXuan">
<ul>
<li>1栏</li>
<li>2栏</li>
<li>3栏</li>
<li>4栏</li>
</ul>
</div>
<div id="baram" class="gao_shaiXuanpai">
<ul>
栏一列表
</ul>
</div>
<div id="pctprice" class="gao_shaJiage">
<ul>
栏二列表
</ul>
</div>
<div id="province" class="gao_shaJiage">
<ul>
栏三列表
</ul>
</div>
<div id="fourg" class="gao_shaJiage">
<ul>
栏四列表
</ul>
</div>
$(function(){
$(".gao_fourXuan li").eq(0).click(function(){
$("#baram").slideToggle("slow");
$("#fourg").hide();
$("#province").hide();
$("#pctprice").hide();
})
$(".gao_fourXuan li").eq(1).click(function(){
$("#baram").hide();
$("#fourg").hide();
$("#province").hide();
$("#pctprice").slideToggle("normal");
})
$(".gao_fourXuan li").eq(2).click(function(){
$("#pctprice").hide();
$("#baram").hide();
$("#fourg").hide();
$("#province").slideToggle("slow");
})
$(".gao_fourXuan li").eq(3).click(function(){
$("#province").hide();
$("#pctprice").hide();
$("#baram").hide();
$("#fourg").slideToggle("normal");
})
})
2.伸缩栏内容升级版("栏位每个标签点击后切换图片")
.gao_fourXuanli2 {float: left;width: 19%;background: url("../../images/wechat/gao_liBg2.gif") 87% 50% no-repeat !important;color: #565656;font-size: 14px;background-size: 20% 80% !important;margin: 2% 0px 2% 1%;padding-left: 4.6%;border-right: 1px solid #bfbfbf;}
即栏内容伸缩的同时栏位:
<li>1栏</li>
<li>2栏</li>
<li>3栏</li>
<li>4栏</li>
的背景图片跟着切换。
//伸缩列表
$(function(){
$(".gao_fourXuan li").eq(0).click(function(){
if($("#baram").css("display")=='none'){
$(".gao_fourXuan li").removeClass("gao_fourXuanli2");
$(this).addClass("gao_fourXuanli2");
}else if($("#baram").css("display")=='block'){
$(this).removeClass("gao_fourXuanli2");
};
$("#baram").slideToggle("slow");
$("#fourg").hide();
$("#province").hide();
$("#pctprice").hide();
})
$(".gao_fourXuan li").eq(1).click(function(){
if($("#pctprice").css("display")=='none'){
$(".gao_fourXuan li").removeClass("gao_fourXuanli2");
$(this).addClass("gao_fourXuanli2");
}else if($("#pctprice").css("display")=='block'){
$(this).removeClass("gao_fourXuanli2");
};
$("#baram").hide();
$("#fourg").hide();
$("#province").hide();
$("#pctprice").slideToggle("normal");
})
$(".gao_fourXuan li").eq(2).click(function(){
if($("#province").css("display")=='none'){
$(".gao_fourXuan li").removeClass("gao_fourXuanli2");
$(this).addClass("gao_fourXuanli2");
}else if($("#province").css("display")=='block'){
$(this).removeClass("gao_fourXuanli2");
};
$("#pctprice").hide();
$("#baram").hide();
$("#fourg").hide();
$("#province").slideToggle("slow");
})
3.终极修改伸缩栏(因为发现之前的有个bug所以改为如下,而且使用hide和show快速切换时候出现jquery的bug,换成了fadein,fadeout)
修改如下:
//伸缩列表
$(function(){
$(".gao_fourXuan li").eq(0).click(function(){
if($("#baram").css("display")=='none'){
$(".gao_fourXuan li").removeClass("gao_fourXuanli2");
$(this).addClass("gao_fourXuanli2");
$("#baram").fadeIn("slow");
$("#fourg,#province,#pctprice").fadeOut();
}else if($("#baram").css("display")=='block'){
$(this).removeClass("gao_fourXuanli2");
$("#baram").fadeOut("slow");
};
})
$(".gao_fourXuan li").eq(1).click(function(){
if($("#pctprice").css("display")=='none'){
$(".gao_fourXuan li").removeClass("gao_fourXuanli2");
$(this).addClass("gao_fourXuanli2");
$("#pctprice").fadeIn("normal");
$("#baram,#fourg,#province").fadeOut();
}else if($("#pctprice").css("display")=='block'){
$(this).removeClass("gao_fourXuanli2");
$("#pctprice").fadeOut("normal");
};
})
$(".gao_fourXuan li").eq(2).click(function(){
if($("#province").css("display")=='none'){
$(".gao_fourXuan li").removeClass("gao_fourXuanli2");
$(this).addClass("gao_fourXuanli2");
$("#province").fadeIn("slow");
$("#pctprice,#baram,#fourg").fadeOut();
}else if($("#province").css("display")=='block'){
$(this).removeClass("gao_fourXuanli2");
$("#province").fadeOut("slow");
};
})
$(".gao_fourXuan li").eq(3).click(function(){
if($("#fourg").css("display")=='none'){
$(".gao_fourXuan li").removeClass("gao_fourXuanli2");
$(this).addClass("gao_fourXuanli2");
$("#fourg").fadeIn("normal");
$("#province,#pctprice,#baram").fadeOut();
}else if($("#fourg").css("display")=='block'){
$(this).removeClass("gao_fourXuanli2");
$("#fourg").fadeOut("normal");
};
})
})