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

发布时间：2020-12-18 00:05:58 所属栏目：安全来源：网络整理

导读：我想用 CSS3转换创建一个自举翻转卡. 我从 working and basic example开始但是我想修改它以获得固定高度卡和一些小的增强功能.特别是当用户点击我在右上角创建的图标时,我需要翻转卡片. 我已经修改了代码,你可以看到here. 问题是在正确翻转到背面后卡不会翻

我想用 CSS3转换创建一个自举翻转卡.
我从 working and basic example开始

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

我已经修改了代码,你可以看到here.

问题是在正确翻转到背面后卡不会翻转到前面.

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

注意：
问题似乎与jquery代码有关.其实我有

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

但如果我改变它

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

一切都按预期工作.

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

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

});

demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!