jquery - jqueryクリック変更クラス

Question

私はjqueryを勉強しています。次のように効果を上げたいと思います。最初にクリックし、div＃cccを下にスライドして、リンククラスを「aaa」に変更します。もう一度クリックし、div＃cccを上にスライドして、リンククラスを「bbb」に戻します。これで、下のスライダーは機能しますが、removeClass、addClassは機能しません。2つの効果が完璧に機能するように変更する方法は？ありがとう。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript">
jQuery(document).ready(function(){              
$("#click").click(function() {
    $("#ccc").slideDown('fast').show();
    $(this).removeClass('bbb').addClass('aaa');
});
$("#click").click(function() {
    $("#ccc").slideDown('fast').hide();
    $(this).removeClass('aaa').addClass('bbb');
});
});
</script>
<style>
#ccc{display:none;}
</style>
<div id="click" class="bbb">click</div>
<div id="ccc">hello world</div>

Answer 1

show/hide の代わりに toggle を使用し、add/remove の代わりに toggleClass を使用して、シングル クリック イベントにマージします。このようなもの（テストされておらず、おそらく機能しない）：

$("#click").click(function() {
    $("#ccc").toggle().animate();
    $(this).toggleClass('bbb aaa');
});

Answer 2

単一のトグル イベントを使用する必要があります。クリック イベントを 2 回設定していますが、それは機能しません。

jsfiddle

Answer 3

トグル イベントを探していると表示されます。

$(document).ready(function () {
    $('div#click').toggle(
        function () {
            $('div#ccc').slideDown('fast').show();
            $('div#click').removeClass('bbb').addClass('aaa');
        },
        function () {
            $('div#ccc').slideDown('fast').hide();
            $('div#click').removeClass('aaa').addClass('bbb');
        });
    });