在僞元素之前切換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圖標

回答

相關問題