javascript - 第二次点击 jQuery

Question

我想知道在这个翻转效果中将 .mouseleave 更改为 .click 的更简单方法是什么：

仅通过更改它是行不通的，我已经阅读了有关使用 .toggle 的信息，但不确定如何使用。

$('.flip').click(function(){
        $(this).find('.card').addClass('flipped').mouseleave(function(){
            $(this).removeClass('flipped');
        });
        return false;
    });

http://jsfiddle.net/nicooprat/GDdtS/

提前致谢。

Answer 1

一样容易：

$('.flip').click(function(){
    $('.card', this).toggleClass('flipped');
    return false;
});

http://jsfiddle.net/zerkms/GDdtS/2252/

Answer 2

此外，您也可以使用悬停事件：

$('.flip').hover(
    function() {
        $(this).find('.card').addClass('flipped');
    },
    function() {
        $(this).find('.card').removeClass('flipped');
    }
);

在这里摆弄

Answer 3

看看 jQuery 的.toggleClass()方法。

$('.flip').click(function(){
    $(this).find('.card').toggleClass('flipped');
});