下拉雪佛龙不旋转答案

【问题标题】：Dropdown chevron not rotating下拉雪佛龙不旋转
【发布时间】：2019-10-30 23:35:35
【问题描述】：

我有一个下拉菜单，希望在单击链接时旋转 V 形。目前这在codepen中有效。但是当我把它转移到我正在开发的网站上时，雪佛龙不会移动。测试和解决此问题的最佳方法是什么？

http://jsfiddle.net/ryannewell/u4om0Lac/16/

<!DOCTYPE html>
<html>
    <head>
 <title>Chevron</title>
 <script defer src="https://use.fontawesome.com/releases/v5.9.0/js/all.js">
</script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



    <style>
.icon-rotates {
  -moz-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}

.icon-rotates.rotate {
  -moz-transition: rotate(180deg);
  -webkit-transition: rotate(180deg);
  transition: rotate(180deg);
}
    </head>

联系链接

下拉菜单

    <script>
$('.contact-link').click(function(){

  if($(this).css("transform") == 'none') {
    $(this).children().css('transform', 'rotate(180deg)');
  } else {
    $(this).children().css('transform', 'none');
  }

});
$(".dropdown").on("hidden.bs.dropdown", function(){
        $(this).find('.contact-link').children().css('transform', 'none');
    });

    </script>

</body>
</html>

我现在已经更新了。单击链接时，雪佛龙会旋转，但在我的解决方案中，我需要 date-toggle="collapse" 而不是 data-toggle="dropdown"。当我将其更改为折叠时，它停止工作

【问题讨论】：

标签： jquery twitter-bootstrap rotation icons dropdown

【解决方案1】：

不确定您是否完全按照实际代码（不是 CodePen）中的方式复制和粘贴，但在您的示例代码中，您的 CSS 和 JavaScript 不在样式或脚本标签内。

【讨论】：

雪佛龙将在 codepen 中制作动画，但不会在我的项目中。解决这个问题的最佳方法是什么？如何向 jquery 添加警报以查看它是否适用于我的项目？
我知道旋转字体图标存在问题，但我不知道原因。您应该能够将 V 形图标包装在另一个 div 中，给该包装器 div 旋转类，它应该可以工作。此外，在上面的代码示例中，您根本没有导入 jQuery。
好的，谢谢 Dan Buda，我试过了，但是雪佛龙停止旋转
我已经更新到这个链接，但是需要用数据切换 chevron 来旋转 data-toggle="collape" jsfiddle.net/ryannewell/u4om0Lac/16