Question

好的，所以我有这个三角形div，当我点击它时，它只旋转180度。好到目前为止一切都很好，但如果我再点击它就会保持不变，这就是我的代码。

$('.Triangle').click(function()
{
    var Location = $('.Triangle').offset().left;
    $('#Account').css({"left" : Location});
    $('#Account').slideToggle('fast');
    $('.Triangle').css({"transform" : "rotate(180deg)"});
});

Answer 1

变换不起作用（即你不能两次应用）。你必须跟踪状态：

$(".Triangle").on('click', function () {
    if ($(this).data('flipped') {
         $(this).data('flipped', false).css('transform', 'rotate(0deg)');
    }

Answer 2

'transform'样式设置元素从其原始位置的旋转。当您第一次单击它时，它会将元素从0deg旋转到180deg。再次点击它时，它会将轮换从180deg更改为180deg。

您需要为点击次数保留一个计数器，并将其乘以您的轮换率。这样的事情可以解决问题：

var count = 1;
$('.Triangle').click(function() {
    var Location = $('.Triangle').offset().left;
    $('#Account').css({"left" : Location});
    $('#Account').slideToggle('fast');
    $('.Triangle').css({"transform" : "rotate(" + (180 * count++) + "deg)"});
});`

Answer 3

var i = 0;
$('.Triangle').click(function() {
    i++;
    var Location = $('.Triangle').offset().left;
    $('#Account').css({"left" : Location});
    $('#Account').slideToggle('fast');
    $('.Triangle').css({"transform" : "rotate(" + (i % 2 ? 0 : 180 + "deg)"});
});

CSS Triangle Flip On Click

3 个答案: