toggleClass() 第一次后不起作用

Question

查看我的代码笔：http://codepen.io/Chiz/pen/XmEvdm

点击红框。它旋转，现在出现蓝色框。单击蓝色框。它不会切换回红色框。

我很确定 toggleClass 部分的 JQuery 代码是正确的，但为什么它不起作用？

谢谢！

var vCard = $("#card");

vCard.on("click", function()
{
  $(this).toggleClass("flipped");
});

@mixin prefix($prop, $val)
{
  -webkit-#{$prop}: #{$val};
  -moz-#{$prop}: #{$val};
  -ms-#{$prop}: #{$val};
  #{$prop}: #{$val};
}

.container
{
  width:200px;
  height:260px;
  position:relative;
  perspective:800px;
}

#card
{
  width:100%;
  height:100%;
  position:absolute;
  @include prefix(transform-style,preserve-3d);
  @include prefix(transition, transform 1s);
  @include prefix(backface-visibility, hidden);
  @include prefix(transform-style, preserve-3d);
}

 #card.flipped
{
  @include prefix(transform, rotateY(180deg));
}

#card figure
{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  @include prefix(backface-visibility, hidden);
}

.front
{
  background-color:lighten(red,30%);
}
.back
{
  background-color:lighten(blue,30%);
  @include prefix(transform, rotateY(180deg));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Answer 1

绑定到 section 时触发的事件。

$('section').on("click", function()
{
 console.log('clicked'); $(this).children('div').toggleClass("flipped");
});

正如@jumpingcode 评论的那样，它与您 css 做出 div 改变位置有关。

Answer 2

试试这个：- http://codepen.io/anon/pen/RWybrd

从 #card

中删除 @include prefix(backface-visibility, hidden);

Answer 3

我做了以下操作并且对我有用。

我从 .card.flipped 中删除了 -webkit-backface-visibility: hidden; 和 backface-visibility:hidden;，并将它们替换为 -moz-backface-visibility: hidden;。

toggleClass() 第一次后不起作用

toggleClass() doesn't work after first time

html

css

jquery

css-transforms

试试这个：- http://codepen.io/anon/pen/RWybrd