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 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>

如何旋转元素？

2 个答案: