在伪元素之前切换ID图标

点击时我想将菜单中的汉堡图标更改为关闭图标，反之亦然。在伪元素之前切换ID图标

它归结为切换：＃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 。任何人都有解决方案？

来源

2014-08-30 sjoerdvh

按这个问题（链接），你不能直接访问ppseudo类规则...你可以改为将'styles ='附加到您的案例中的div /或图标...：http://stackoverflow.com/questions/10061414/changing-width-property-of-a-before-css-selector-using -jquery – mk117 2014-08-30 12:44:38

试试这个：

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

});

来源

2014-08-30 12:56:07 mk117

感谢您的解决方案。可能它工作，但由于某种原因，风格不加入头部。在这里你可以看到我的意思：http://prinstepaard.tk/ – sjoerdvh 2014-08-30 13:44:55

不知道为什么JQuery不起作用。非常感谢mk117！ – sjoerdvh 2014-08-31 07:18:05

不客气！ – mk117 2014-08-31 07:18:44

最终我通过CSS管理使用：

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

来源

2014-08-31 07:17:43 sjoerdvh

在伪元素之前切换ID图标

回答

相关问题