第二次點擊時顯示容器

Question

我點擊時使用css翻轉容器。

我想讓JQuery放大頁面上容器的背面容器once flipped和hide all other。

當容器是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(); 
    }); 

我的問題是當我第二次點擊所有隱藏的容器時隱藏。

這是我的HTML。

<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來確保我們不會切換我們點擊的容器的可見性。

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

在你的CSS外商投資企業，確保活動類包含寬度/高度限制：

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