Jquery 滑动和切换字体类

我正在学习jQuery。有很多事情我仍然不明白。在这里，我尝试滑动切换字体类。我不知道如何才能做到这一点。这就是我目前所拥有的

$(function() {
    $("#nav").click(function(){
        $("#naver").slideToggle(function(){
            $("#nav i").removeClass("fa-bars").addClass("fa-eye");
        }, function(
            $("#nav i").removeClass("fa-eye").addClass("fa-bars");
        ));
    });
});

html

对于

slideToggle（）

，您实际上不需要另一个回调函数，使用

toggleClass（）

也可以节省几行代码。通常，如果我们只有一个事件（即单击），我们可以在该事件中绑定与该事件相关联的所有函数

片段

$（函数（）{
$（“#导航”）。单击（函数（）{
$（“#导航”）.slideToggle（）；
$（“#nav i”）.toggleClass（“fa-bars-fa-eye”）；
});
});


您的第二个回调函数有一点输入错误，尽管您无法使用多个回调函数，因为您已经尝试使用了
滑动切换
。我已修改了您的代码，请在此处预览：

JS

HTML

<div id="nav">
    <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</div>

<ul id="naver">
    <a href="#"><li>Home</li></a>
    <a href="#"><li>About</li></a>
    <a href="#"><li>Contact</li></a>
</ul>

$(function() {
    $("#nav").click(function(){
        $("#naver").slideToggle(250);
        $("#nav i").toggleClass("fa-bars").toggleClass("fa-eye");
    });
});

<div id="nav">
    <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</div>

<ul id="naver">
    <a href="#"><li>Home</li></a>
    <a href="#"><li>About</li></a>
    <a href="#"><li>Contact</li></a>
</ul>

#naver{ display:none; }