點擊時切換字體真棒圖標？

-1

我試圖用點擊（和後面）上的fa時間圖標來更改fa-bars圖標。我仔細研究了一個類似的解決方案，但我似乎無法做到。點擊時切換字體真棒圖標？

HTML + jQuery的

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 

<a href="#" class="toggle-nav js-nav"><i class="fa fa-bars fa-lg"></i></a> 

<div class="nav-wrap"> 
    <nav class="menu"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Works</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </nav> 
</div> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.js-nav').click(function(){ 
    $(this).parent().find('.menu').toggleClass('active'); 
     }) 
}); 
</script>

DEMO: navigation bar

感謝

來源

2015-10-29 mey

似乎在搗鼓工作，如果你正確鏈接到樣式表https://jsfiddle.net/j08691/r8p0hs3b/50/ – j08691

j08691是在正確的撥弄工作與適當的樣式錶鏈接。你有一個沒有http鏈接，所以它被阻止，再加上你應該鏈接到它的資源。 – fanfavorite

謝謝，我注意到它太晚了...我再次鏈接它。對於那個很抱歉。 – mey

試試下面的，讓我知道你上車。

$(document).ready(function() { 
    $('.js-nav').click(function(){ 
$(this).parent().find('.menu').toggleClass('active'); 
$(this).find('i.fa').removeClass('fa-bars').addClass('fa-times'); 
    }) 
});

來源

2015-10-29 20:56:18

感謝dru_ward，它的工作原理，但它不會改回fa-bars。我如何將其添加到代碼？ – mey

Ahhh我剛剛看到（加回）我的不好，請嘗試以下內容：$（document）.ready（function（）{$（'。js-nav'）。click（function（）{\t $（this）。 parent（）。find（'。menu'）。toggleClass（'active'）; if（$（this）.find（'i.fa'）。hasClass（'fa-bars'））{$（this）。 find（'i.fa'）。removeClass（'fa-bars'）。addClass（'fa-times'）;} else if（$（this）.find（'i.fa'）。hasClass（'fa- '））{$（this）.find（'i.fa'）。removeClass（'fa-times'）。addClass（'fa-bars'）;}}）}）（）; –

太棒了！它的作品，非常感謝你！ – mey

點擊時切換字體真棒圖標？

回答

相關問題