JQuery нажмите изменить класс

Question

Я изучаю jquery, хочу сделать следующее: сначала щелкните, сдвиньте вниз div # ccc и измените класс ссылки на 'aaa'; нажмите еще раз, передвиньте div # ccc и измените класс ссылки обратно на «bbb». Теперь ползунок вниз может работать, но удалить класс, добавить класс не работает. как изменить так, чтобы два эффекта работали идеально? спасибо.

<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

Используйте toggle вместо show / hide и toggleClass вместо add / remove, и объединитесь в одно событие клика.Примерно так (не проверено и, вероятно, не работает):

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

Answer 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');
        });
    });