CSS三角形翻轉點擊

好吧，我有這個三角形的div，當我點擊它時，它只旋轉180度。好吧，那麼好，但如果我再次點擊它保持不變，這裏是我的代碼。CSS三角形翻轉點擊

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

來源

2013-02-10 Moussa Harajli

是它應該做的另一個180度旋轉 – 2013-02-10 00:26:56

你要旋轉回其初始值？ – yckart 2013-02-10 00:29:09

'變換'風格設置元素從它的原始位置的旋轉。當您第一次點擊它時，它會將元素從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)"}); 
});`

來源

2013-02-10 00:28:55 jungos

如果您的_Triangle_類有多個_HTMLElement_，這可以正常工作嗎？ – 2013-02-10 00:29:44

它應該，但我承認我沒有測試過這個代碼。 – jungos 2013-02-10 00:31:18

它工作！謝謝！ – 2013-02-10 00:31:39

轉換不會以這種方式工作（即您不能應用兩次）。你必須跟蹤狀態：

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

來源

2013-02-10 00:28:41

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

來源

2013-02-10 00:32:22 yckart

CSS三角形翻轉點擊

回答

相關問題