두 번째 클릭시 컨테이너 표시

Question

클릭하면 컨테이너를 뒤집기 위해 CSS를 사용하고 있습니다.

페이지의 컨테이너 once flipped 및 hide all other 컨테이너의 뒷면이 확대되도록 JQuery를 얻으려고합니다.

컨테이너가 clicked again 인 경우 return to normal (모든 컨테이너를 다시 표시)로 설정합니다.

이것은 내 코드에 관한 것입니다.

$('.f1_container').click(function(event) { 
    $('.f1_container').toggleClass('active').width(320).height(400);}).click(function(){ 
    $('.f2_container,.f3_container,.f4_container,.f5_container,.f6_container').hide(); 
    }); 

내 숨겨진 컨테이너를 숨긴 채 두 번째 클릭하면 내 문제가 발생합니다.

여기 내 입니다.입니다.

<div class="f1_container"> 
    <div class="shadow f1_card"> 
    <div class="front face"> 
     <img src="images/y1.jpg" style="height: 160px; width: 160px;"> 
    </div> 
    <div class="back face center"> 
     Some text inside here 
    </div> 
    </div><!-- end of shadow f1_card --> 
</div><!-- end of f1_container --> 

<div class="f2_container"> 
    <div class="shadow f2_card"> 
    <div class="front face"> 
     <img src="images/o1a.jpg" style="height: 160px; width: 160px;"> 
    </div> 
    <div class="back face center"> 
     Some text inside here 
    </div> 
    </div><!-- end of shadow f2_card --> 
</div><!-- end of f2_container --> 

<div class="f3_container"> 
    <div class="shadow f3_card"> 
    <div class="front face"> 
     <img src="images/o1a.jpg" style="height: 160px; width: 160px;"> 
    </div> 
    <div class="back face center"> 
     Some text inside here 
    </div> 
    </div><!-- end of shadow f3_card --> 
</div><!-- end of f3_container --> 

Answer 1

당신이 정말로이 기능은 특정 각각에 대해 서로 다른 처리기의 톤을하지 않고 모든 컨테이너에 작업 할 것을 가정 할 때, 우리는 jQuery의 attribute ends with selector ($)를 사용할 수 있습니다. _container으로 끝나는 모든 수업과 비교할 수 있습니다. 또한 우리가 클릭 한 컨테이너의 가시성을 토글하지 않도록하기 위해 .not을 사용합니다. 당신의 CSS의 헛소리에

$('*[class$="_container"]').click(function(){ 
    $(this).toggleClass('active'); 
    $('*[class$="_container"]').not(this).toggle(); 
}); 

, 활성 클래스를 확인 너비/높이 제약 조건이 포함되어

.active{ 
    width: 320px; 
    height:400px; 
}