jQuery的点击更改类

Question

我正在研究jquery，我希望实现以下效果：首先单击，向下滑动div＃ccc并将链接类更改为“ aaa”；再次单击，将div＃ccc向上滑动并将链接类更改回'bbb'。现在向下滑动滑块可以使用，但是removeClass和addClass无法使用。如何修改使两个效果完美？谢谢。

<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

您需要使用一个切换事件。您要设置两次click事件，但无法正常工作。

jsfiddle

Answer 2

Use toggle instead of show/hide and toggleClass instead of add/remove, and merge into a single click event. Something like this (untested and probably doesn't work):

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