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

Question

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

归结为切换： #nav-toggle-main:之前 至 #nav-toggle-close:之前

这是 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');
    });

});