twitter-bootstrap 带 css3 转换的 Bootstrap 翻转卡

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30698272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:48:08  来源:igfitidea点击:

Bootstrap flip card with css3 transform

twitter-bootstrapcsscss-transformsflipview

提问by Lorenzo

I want to create a bootstrap flip card by using CSS3 transform. I did started from this working and basic example

我想通过使用 CSS3 转换创建一个引导翻转卡。我确实从这个工作和基本示例开始

However I wanted to modify it to have a fixed height card and some minor enhancement. In particular I needed to have the card flip when the user click on an icon I have created on the top right corner.

但是我想修改它以具有固定高度的卡片和一些小的增强。特别是当用户单击我在右上角创建的图标时,我需要翻转卡片。

I have modified the code as you can see here.

我已经修改了代码,你可以在这里看到。

The problem is that the card does not flip back to front after having flipped correctly to the back side.

问题是卡片在正确翻转到背面后没有翻转回正面。

Can anybody suggest any solution?

有人可以建议任何解决方案吗?

NOTE:the problem seems to be with the jquery code. Actually I have

注意:问题似乎出在 jquery 代码上。其实我有

$('div.flipControl').on('click', function () {
    $(this).closest('div[class="card"]').toggleClass('flipped');
});

But if I change it with

但如果我改变它

$('div.flipControl').on('click', function () {
    $(this).parent().parent().parent().toggleClass('flipped');
});

Everything works as expected.

一切都按预期工作。

采纳答案by vals

I think that it is much simpler using directly the CSS class selector

我认为直接使用 CSS 类选择器要简单得多

$('.flipControl').on('click', function(){
    $(this).closest('.card').toggleClass('flipped');

});

demo

演示