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>

- cj333

Answer 1

使用toggle代替show/hide，使用toggleClass代替add/remove，并将它们合并成一个单击事件。像这样（未经测试，可能不起作用）：

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

- SickHippie

---

$(this).toggleClass('bbb aaa'); 更好。 - Code Maverick

好的，干净利落的解决方案。谢谢。 - Dan

Answer 2

你需要使用单个切换事件。你设置了两次点击事件，这样是行不通的。

jsfiddle

- Tim Hobbs

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

- Andrew