jquery更改css单击

我创建了一个菜单，它是jquery为下拉菜单制作的。它很好用。但我想旋转足总杆。我写了密码。CSS代码不起作用。我错过了什么

$(function(){
    var a = 0;
    $('.topnavmenuOpen').click(function(){
        if ( a == 0 ){
            $(this).html('<i class="fa fa-bars" aria-hidden="true"></i>');
            a++;
        } else {
            $(this).html('<i class="fa fa-bars" aria-hidden="true"></i>');
            a = 0;
        }
        $(this).next('ul').slideToggle(500);


    });


$('.topnavmenuOpen').click(function(){
                          $('i .fa').css({
    'transform' : 'rotate(180deg)',
    'transition' : 'width 2s, height 2s, transform 2s'
});
                          });

});

$（函数（）{
var a=0；
$（'.topnavmenuOpen'）。单击（函数（）{
如果（a==0）{
$（this.html（“”）；
a++；
}否则{
$（this.html（“”）；
a=0；
}
$（this）.next（'ul'）.slideToggle（500）；
});
$（'.topnavmenuOpen'）。单击（函数（）{
$（'i.fa'）.css({
“变换”：“旋转（180度）”，
“过渡”：宽度2s，高度2s，变换2s
});
});
});

问题在于这个选择器：

$（'i.fa'）

这意味着“一个元素的类

.fa

位于

i

元素中”。您需要

$（'i.fa'）

，这意味着“类为

.fa

的

i

元素”

$('.topnavmenuOpen').click(function(){
                      $('i .fa').css({
'transform' : 'rotate(180deg)',
'transition' : 'width 2s, height 2s, transform 2s'
});
                          });

改变

$(".topnavmenuOpen").on('click', function(){
    $("i.fa").addClass("rotate");
});

并添加您的css页面

.rotate {
    transform: rotate(180deg);
    transition: all 2s;
}

---

你确定吗：

width 2s，height 2s，transform 2s

我还没有看到这个表单……是的，我在w3schools中看到过。它在CSS源代码中工作。它也在：active中运行。但是在jquery中，什么都没有发生。我应该看到它。我尝试了

I.fa.fa bar

并且它工作了。谢谢。它比我的jquery源代码更稳定吗？当然.实际上，您最好在该单击函数中使用其他单击函数