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＆＃39; attribute ends with selector ($)。我们可以与任何以_container结尾的类进行比较。我们还使用.not来确保我们不会切换我们点击的容器的可见性。

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

在CSS中，确保活动类包含宽度/高度约束：

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

第二次单击显示容器

1 个答案: