Question

我正在学习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，

<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>

Answer 1

您的第二个回调函数中有一个小错字，尽管您尝试使用slideToggle时无法使用多个回调函数。我修改了你的代码，在这里预览：https://jsfiddle.net/4xu16oqn/1/

JS

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

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>

CSS

#naver{ display:none; }

Answer 2

您不需要slideToggle()的其他回调函数，使用toggleClass()也会为您节省几行代码。通常，如果我们只有一个事件（即点击），我们可以在该事件中绑定与该一个事件相关的所有功能。

<强>段

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

滑动和切换字体真棒jQuery的类

2 个答案: