如何旋轉元素？

Question

這是我的代碼：

 $('.click').on('click', function(){ $(this).next('div').toggle(100); }); 

 .click{ cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="click">click <i class="fa fa-caret-down" aria-hidden="true"></i></div> <div>something</div> 

正如您所看到的那樣， 箭頭（ click旁邊）是固定的..當用戶點擊div.test時，如何將其旋轉45°？

Answer 1

另一種選擇：你可以使用fontawesome的fa-caret-right並切換它！

讓我知道您的反饋。 謝謝！

 $('.click').on('click', function(){ $(this).next('div').toggle(100, 'linear', function(){ $(this).prev('div').find('i').toggleClass('fa-caret-down'); $(this).prev('div').find('i').toggleClass('fa-caret-right'); }); }); 

 .click{ cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="click">click <i class="fa fa-caret-down" aria-hidden="true"></i></div> <div>something</div> 

Answer 2

您可以簡單地使用transform CSS屬性。 在MDN文檔中閱讀有關它的更多信息。

 $('.click').on('click', function(){ $(this).next('div').toggle(100) $(this).children('i').toggleClass('rotate'); }); 

 .click{ cursor: pointer; } .rotate { transform: rotate(270deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="click">click <i class="fa fa-caret-down" aria-hidden="true"></i></div> <div>something</div>