如何旋转元素？答案

【问题标题】：How can I rotate an element?如何旋转元素？
【发布时间】：2016-12-27 06:22:30
【问题描述】：

这是我的代码：

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

【问题讨论】：

Want to rotate element in jquery的可能重复

标签： javascript jquery html css jquery-selectors

【解决方案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>

【讨论】：

我真的不明白你为什么在这种情况下使用.prev()？ .prev() 到底在里面做什么？
因为函数内部this的意思是<div>something</div>

【解决方案2】：

您可以简单地使用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>

【讨论】：