第一次使用后，toggleClass（）不起作用

Question

请参阅我的codepen： http ：//codepen.io/Chiz/pen/XmEvdm

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

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

TKS！

 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

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

删除@include prefix(backface-visibility, hidden); 来自#card

Answer 2

事件绑定到section时触发的事件。

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

所以@jumpingcode评论说，它与你的css相关，使得div改变位置。

Answer 3

我做了以下工作，它对我有用。

我从.card.flipped中删除了-webkit-backface-visibility: hidden; 还有backface-visibility:hidden; 我用-moz-backface-visibility: hidden;替换了那些-moz-backface-visibility: hidden; 。