用jquery UI替换类时隐藏/显示类

我在一页中有4个等距的方框。我想能够点击一个，它会扩展到2的区域，同时隐藏右边的一个。下面的代码允许我单击.box1并展开box1/hide box2以填充两个框空间。问题是，当我单击box1以接近原始大小时，它不会像应该的那样将box2放回原处。以下是迄今为止的代码：

$(function() {


    $( ".box1" ).click(function() {
    $( ".box1" ).switchClass( "box1", "box1_l", 200 );
    $( ".box1_l" ).switchClass( "box1_l", "box1", 200 );
    $(".box2").hide();

        return false;
    });

$(function() {

    $( ".box1_l" ).click(function() {
    $( ".box2").show();
        return false;
    });

});

提前感谢：）

感谢CYBERNATE解决了以下问题：

$(function() {
$( ".box1" ).click(function() {
    var $box2 = $(".box2");
    if($box2.is(":visible")){
        $( ".box1" ).switchClass( "box1", "box1_l", 200 );
        $( ".box1_l" ).switchClass( "box1_l", "box1", 200 );
        $(".box2").hide();
        return false;
    } else{
    $( ".box2").show();
     $( ".box1_l" ).switchClass( "box1_l", "box1", 200 );

 return false;
    }
}); 

}))

试试这个：

$(function() {
    $( ".box1" ).click(function() {
        var $box2 = $(".box2");
        if($box2.is(":visible")){
            $( ".box1" ).switchClass( "box1", "box1_l", 200 );
            $( ".box1_l" ).switchClass( "box1_l", "box1", 200 );
            $(".box2").hide();
            return false;
        } else{
             //Not sure if you need the two commented lines below.   
         //$( ".box1" ).switchClass( "box1_l", "box1", 200 );
         //$( ".box1_l" ).switchClass( "box1", "box1_l", 200 );
         $( ".box2").show();
     return false;
        }
    }); 
}); 

---

jQuery是JavaScript，它在（x）html上工作。你能把你的工作成绩公布出来吗？或者是一个演示？上面的[链接]网站是这个问题的演示Darn我必须成为一名作家8小时才能回答我自己的问题：）谢谢你Cybernate！！我不得不改变你的代码中的一些变量，但现在它的工作就像一个符咒！！