Jquery：SlideToggleで親要素のテキストを変更しますか？次のように私はslideToggleをしています

Question

：

$(document).ready(function(){  
     $("#show_morecats").click(function(){ 
     $("#morecats").slideToggle("slow"); 
     $("#show_morecats").css("background-color","#399C05"); 
    }); 
}); 

HTML

<a href="#" id="show_morecats">More</a> 
<div id="morecats" style="display:none;">Some text</div> 

今、私はMoreリンクをクリックすると、その後morecatsのdivは、スライド効果を開き、moreリンクの色が赤になりたいです再びmoreリンクをクリックするとリンクが閉じ、リンクの色は青色になります。

SlideToggleは正常に動作していますが、リンクの色付けが正しく機能していません。私は置いてはいけない：私は同じことを行うjqueryの関数があることを知っているので、可視の状態にして、あなたのdivを切り替えて、同じ時間でメインの要素のクラスやCSSを切り替えますが、その正確な関数と使い方。私はそれについてgoogledしかし、何も得ていない。

誰でもこのトグルの問題を解決する最短方法を提案できますか？

Answer 1

閉じたときに戻って青に開かとするとき、カスタムクラスである色の変化を達成するための最良の方法は...あなたはクラスを切り替えることができますこの方法...

jQueryの：

$(document).ready(function(){ 
    $('#show_morecats').bind('click', function(){ 
     $('#morecats').slideToggle('slow', function() { 
      $('#show_morecats').toggleClass("opened"); 
     }); 
    }); 
}); 

HTML：

<a href="#" id="show_morecats">More</a> 
<div id="morecats" style="display:none;">Some text</div> 

CSS：

#show_morecats { color: blue; } 
#show_morecats.opened { color: red; } 

Answer 2

アニメーションが完了したら背景色を変更したいのですか？これが、slideToggleのコールバック引数です。

変更に二行目：私は正直だ場合、あなたの疑問を言葉で表現しました方法は、少し紛らわしいですが、あなたはまた、toggleClass()メソッドを使用することができます

$('#morecats').slideToggle('slow', 
    function() { $('#show_morecats').css({ backgroundColor: '#399C05' }); 
}); 

。