javascript - CSS三角形点击翻转

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)"});
});