第一次使用后，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; 。