Question

我创建了一个菜单，这个菜单是由jquery为下拉列表制作的。它工作正常。但我想旋转fa-bars。我写了代码。 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'
});
                          });

});

Answer 1

问题在于此选择器：$('i .fa')表示“.fa元素中具有类i的元素”。您需要$('i.fa')，这意味着“i元素与.fa类。

Answer 2

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

jquery改变css点击

2 个答案: