Jquery - jquery UI로 클래스를 바꾸는 동안 클래스 숨기기/표시

Question

내 문제를 heres. 한 페이지에 4 개의 동일한 간격의 상자가 있습니다. 나는 하나를 클릭 할 수 있기를 원하고, 오른쪽에있는 것을 숨기면서 2의 영역에 맞게 확장합니다. 아래 코드는 .box1을 클릭하고 box1/hide 상자 2를 확장하여 2 개의 상자 공간을 채울 수있게합니다. 문제는 box2를 원래 크기로 닫으려면 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 TO :

$(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; 
    } 
}); 

}) 다음 코드는 나와 함께 그렇게 베어 JQuery와 매우 유창하지 않다, 지금까지입니다 ;

Answer 1

이 시도 :

$(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; 
     } 
    }); 
});