После того, как слайд-эффект, шрифт, потрясающий значок не отображается

Question

Приведенный ниже код позволяет выполнить скольжение вверх и вниз по выбранному элементу, но по какой-то причине после слайд-шоу шрифт fa-chevron-down awesome не отображается :

function showHideChatBox(element){ 
     var e = jQuery(element).parents(".box1").children(".box1-body"); 
     var t = 0; 

     if(jQuery(element).hasClass("collapse")) { 
      jQuery(element).removeClass("collapse").addClass("expand"); 
      t = jQuery(element).children(".fa-chevron-down"); 
      t.removeClass("fa-chevron-down").addClass("fa-chevron-up"); 
      e.slideUp(200); 
     } 

     else { 
      jQuery(element).removeClass("expand").addClass("collapse"); 
      t = jQuery(element).children(".fa-chevron-up"); 
      t.removeClass("fa-chevron-up").addClass("fa-chevron-down"); 
      e.slideDown(200); 
     } 
} 

Answer 1

Я не думаю, что вы правильно приближаетесь к этому, вы должны быть ссылки на классе тумблера правильно «тумблер» шрифт удивительного шеврон иконка. Попробуйте использовать класс переключения JQuery следующим образом:

JS

$(function() { 
    $('.dropdown_icon').click(function() { 
     $("#dropdown").slideToggle('fast'); 
     $(this).children(".fa-chevron-down, .fa-chevron-up").toggleClass('fa-chevron-down fa-chevron-up'); 
    }); 
}); 

Какой упрощенный вариант ответа на этот вопрос: Change class on inactive icon - jquery

HTML

<div id="header"> 
    <ul class="hdr_link_icons"> 
     <li class="dropdown_icon"> 
      Dropdown<i class="fa fa-chevron-down"></i> 
     </li> 
    </ul>  
    <ul class="dropdown_area" id="dropdown"> 
     <li><a href="">Your Account <span class="hdr_link_arrow">&#187;</span></a></li> 
     <li><a href="">Corporate Sales <span class="hdr_link_arrow">&#187;</span></a></li> 
     <li><a href="">Got a voucher? <span class="hdr_link_arrow">&#187;</span></a></li> 
    </ul> 
</div> 

CSS

body { margin:0; padding:0; } 
ul { margin:0; padding:0; } 
#header { height:auto; width:100%; overflow:hidden; border-bottom:1px dashed #c1c1c1; padding:5px 0; } 
#header .header_logo { height:40px; width:auto; float:left; } 
#header .hdr_link_icons { height:40px; width:auto; float:right; list-style:none; background-color: yellow; } 
#header .hdr_link_icons li { height:40px; width:70px; float:right; list-style:none; border-right:1px solid #ebebeb; padding:0 0 0 5px; cursor:pointer; position:relative; } 
#header .hdr_link_icons li i { position:absolute; right:7px; top:15px; color:#666666; } 
#header .hdr_dropdown_area { height:auto; width:100%; background:#F5F2F2; border-top:5px solid #712D55; position:absolute; top:51px; right:0; } 
#header .hdr_dropdown_area li { height:auto; float:none; border-bottom:1px dotted #c1c1c1; font-family:tahoma, arial; padding:10px 0; margin:0 0 0 10px !important; text-align:left; text-transform:capitalize; } 
#header .hdr_dropdown_area li:last-child { border:none; } 
#header .hdr_dropdown_area li a { color:#333333; text-decoration:none; } 
#header .dropdown_area { display:none; }