单击功能.slideToggle打开后

Question

// Toggle
$('#toggle').click(function() {
  $('.extra').slideToggle();
});

.extra {
    display: none;
}

 #toggle {
 cursor:pointer;
 width:100%;
 display:block;
 text-align: center;
 padding:10px 0;
 color:#777;

}

使用字体真棒fa fa-chevron-down我试图这样做，所以一旦slideToggle被打开，它就变成了fa-chevron-down

我很确定这很简单但我似乎无法找到任何东西

Answer 1

$('#toggle').click(function() {
  $('.extra').slideToggle(400, function(){
    $("#toggle .additionalClassToTheIcon").toggleClass("fa-chevron-up fa-chevron-down");
  });
});

如果 400 是动画的持续时间，您可以将其更改为您想要的任何内容。 additionalClassToTheIcon 是图标的附加类，因此您始终可以识别它。

另请查看此文档：

http://api.jquery.com/slidetoggle/

http://api.jquery.com/toggleClass/

Answer 2

if($("#toggle .iconClassHere").hasClass("fa-chevron-down")) {
    $("#toggle .iconClassHere").removeClass("fa-chevron-down");
    $("#toggle .iconClassHere").addClass("fa-chevron-up");
}else {
    $("#toggle .iconClassHere").removeClass("fa-chevron-up");
    $("#toggle .iconClassHere").addClass("fa-chevron-down");
}