點擊動畫字體真棒圖標從一個到另一個

Question

當單擊展開和折疊表格時，我沒有任何運氣使用 css 轉換將每個圖標從一個旋轉到另一個。 當您打開或關閉表格時，我希望每個圖標都旋轉 180 度。 我嘗試使用 fa-rotate 和翻轉，但不起作用，我應用的任何 css 轉換也沒有

在這里小提琴 - https://jsfiddle.net/kcexpg4j/3/

 body{border:1px solid black} table{width:400px;margin:0 auto}.fa{cursor:pointer}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <table> <caption> <span class="module_expand custom_collapse" id="myCollapse_13" onclick="jQuery('#myCollapse_13').parent('').parent().find('tbody:eq(0)').attr('style','display:none');jQuery('#myExpand_13').removeAttr('style');jQuery('#myCollapse_13').attr('style','display:none');"> <i class="fa fa-minus" aria-hidden="true"></i> </span> <span class="module_expand custom_expand" id="myExpand_13" onclick="jQuery('#myExpand_13').parent().parent().find('tbody:eq(0)').removeAttr('style');jQuery('#myExpand_13').attr('style','display:none');jQuery('#myCollapse_13').removeAttr('style');" style="display:none"> <i class="fa fa-plus" aria-hidden="true"></i> </span> <span>Current Waiver Claims</span> </caption> <tbody> <tr> <th>Round</th> <th>Add</th> <th>Drop</th> <th>Time Entered</th> </tr> <tr> <td colspan="4" align="center">You don't have any waiver claims submitted into the system at this time.</td> </tr> </tbody> </table>

Answer 1

點擊事件觸發后可以切換三個類：

 $('.fa').click(function(){ $(this).toggleClass('fa-minus fa-plus rotate'); $('tbody').toggle(); });

 body{border:1px solid black} table{width:400px;margin:0 auto}.fa{cursor:pointer;transition:transform.75s} /* adjust to your needs */.rotate{transform:rotate(180deg)}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <table> <caption> <i class="fa fa-minus" aria-hidden="true"></i> <.--<i class="fa fa-plus" aria-hidden="true"></i> not necessary to use both --> <span>Current Waiver Claims</span> </caption> <tbody> <tr> <th>Round</th> <th>Add</th> <th>Drop</th> <th>Time Entered</th> </tr> <tr> <td colspan="4" align="center">You don't have any waiver claims submitted into the system at this time.</td> </tr> </tbody> </table>