如何旋转元素？

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 旁边） 是固定的。当用户单击 [=14 时，如何将它旋转 45° =] ?

Answer 1

您可以简单地使用 transform CSS 属性。在 MDN docs 中阅读更多相关信息。

$('.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>

Answer 2

另一种选择：您可以使用 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>

如何旋转元素？

How can I rotate an element?

html

javascript

css

jquery

jquery-selectors