第二次点击时显示容器

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