使用before伪元素在ID上切换图标

Question

点击时，我想将菜单中的汉堡图标更改为关闭图标，反之亦然。

归结为切换：     ＃NAV-肘主：前 至     ＃NAV-肘接近：前

这是CSS：

#nav-toggle-main:before {
float: left;
content: '\f0c9';
font-family: FontAwesome;
padding: 16px 10px;
}

#nav-toggle-close:before {
float: left;
content: '\xf00d';
font-family: FontAwesome;
padding: 16px 10px;
}

使用toggleClass看起来不可能。 有人有解决方案吗？

Answer 1

最后，我通过使用：

来管理CSS

.nav-open #nav-toggle-main:before{
content:'\f00d';
}

Answer 2

试试这个：

$(document).ready(function(){

    $('head').append('<style>.burger2close:before{ content: "\xf00d"; !important;} .close2burger:before{ content: "\f0c9"; !important;}</style>');

    $('#nav-toggle-main').on('click', function(){
        $(this).toggleClass("burger2close close2burger");
        $('#nav-toggle-close').toggleClass('close2burger burger2close');
    });


    $('#nav-toggle-close').on('click', function(){
        $(this).toggleClass("close2burger burger2close");
        $('#nav-toggle-main').toggleClass('burger2close close2burger');
    });

});