jquery标题栏伸缩以及标题栏背景图跟着切换

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");
};
})
})