使用jQuery向上或向下旋轉

我有一個簡單的下拉菜單，它由三角形（插入符號）符號打開。當菜單打開時，我需要將插入符號顛倒（180度），並在返回時返回默認位置。理想的做法是在不考慮css類的情況下實現這一點，這是我最常提出的解決方案，當時我正在尋找答案。使用jQuery向上或向下旋轉

我曾嘗試使用三元操作上點擊，這樣的：

$(this).css('transform', ($(this).css('transform') == 'rotate(180deg)') ? 'none' : 'rotate(180deg)');

但它不會工作;它會旋轉一次 - 倒過來 - 但不會在下次單擊時回到默認位置。我也試過'旋轉（0deg）'和'旋轉（360deg）'，效果相同（實際上沒有效果）。我應該用什麼聲明來代替？

來源

2017-03-06 Lafioka

如果你發佈更多的代碼，特別是HTML，它也會有所幫助。 – garek007

你有console.log（$（this）.css（'transform'））來查看返回值是否實際上是「rotate（180deg）」？ – macramole

正如documentation描述值變換屬性不旋轉...。

因爲你只需要旋轉之間切換，而不是你可以從測試更改：

$(this).css('transform', ($(this).css('transform') == 'rotate(180deg)') ? 'none' : 'rotate(180deg)');

到：

$(this).css('transform', ($(this).css('transform') == 'none') ? 'rotate(20deg)' : 'none');

一個例子：

$('p').on('click', function(e) { 
 
    console.log($(this).css('transform')); 
 
    $(this).css('transform', ($(this).css('transform') == 'none') ? 'rotate(180deg)' : 'none'); 
 
})

p { 
 
    border: solid red; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<p>Transformed element</p>

來源

2017-03-06 19:29:51 gaetanoM

謝謝！你是對的，我應該首先檢查這個值。 – Lafioka

試試看這裏的答案吧jQuery toggle CSS?使用jquery切換。雖然我不確定爲什麼要避免使用CSS類，但這會讓它變得非常容易。

來源

2017-03-06 19:12:47 garek007

謝謝，看來我沒有別的選擇。 – Lafioka

css（'transform'）有它自己的時間表。第一次跑，它達到了時間線的結束。你不能指望它再次重新開始時間表。

我發現的是，你可以..「相當哈克」，增加超時的聲明。當啓動超時（即使計時器爲0ms）時，css將刷新並再次進行css屬性的第二次更改。

這就是爲什麼人們在JS中添加CSS類的原因。因爲當你添加或刪除一個CSS類。您只需強制瀏覽器重新渲染，以便該CSS屬性的時間軸得到重置。

來源

2017-03-06 19:13:26

謝謝！這真的很好解釋。 – Lafioka

使用jQuery向上或向下旋轉

回答

相關問題