slideToggle и toggleClass не работают вместе?

Question

Я пытаюсь свернутьToggle, а затем toggleclass, но, добавив toggleclass, slideToggle не «скользит», кто-нибудь знает, как я могу это исправить?

fiddle и код ниже.

$(function() { 
     $(".expand").on("click", function() { 
      $(this).next().slideToggle().toggleClass('slidein'); 

      $expand = $(this).find(">:first-child"); 


      if ($expand.text() == "\u25B6") { 
       $expand.text("\u25BC"); 


      } else { 
       $expand.text("\u25B6"); 
      } 
     }); 

    }); 

Answer 1

Он прекрасно работает, но скрыть элемент, а затем добавить класс, так что вы не можете увидеть toggleClass.

Вы сделали некоторые ошибки в файле CSS и в логике JS. удалите переходы CSS3, и он будет работать нормально.

transition: all 1s ease-in-out; 

Наконец, своего рода код без toggle методов, например:

$(function() { 
    $(".expand").on("click", function() { 

     if($(this).parent().find('.detail').css('display') == 'block'){ 
      $(this).parent().find('.detail').slideUp(); 
      $(this).parent().find('#titles').animate({'left' : -200}); 
     } else { 
      $(this).parent().find('.detail').slideDown(); 
      $(this).parent().find('#titles').animate({'left' : 0}); 
     } 

    }); 

}); 

Смотрите мою рабочую демо: JSBIN. Это то, что вам нужно иметь?