Question

我正在尝试使用点击（和背面）上的fa-times图标更改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

由于

Answer 1

尝试以下操作，让我知道你是如何继续的。

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

单击时切换字体真棒图标？

1 个答案: