jquery单击更改类

时间:2011-05-19 21:35:27

标签: jquery click addclass removeclass

我正在研究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>

3 个答案:

答案 0 :(得分:4)

您需要使用单个切换事件。您正在设置两次点击事件,但这不起作用。

jsfiddle

答案 1 :(得分:4)

使用切换而不是显示/隐藏和toggleClass而不是添加/删除,并合并为单击事件。这样的事情(未经测试,可能不起作用):

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

答案 2 :(得分:1)

您正在寻找toggle event,它出现了。

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