jquery点击更改类答案

【问题标题】：jquery click change classjquery点击更改类
【发布时间】：2011-05-19 21:35:27
【问题描述】：

我正在学习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>

【问题讨论】：

标签： jquery click addclass removeclass

【解决方案1】：

使用切换代替显示/隐藏和切换类代替添加/删除，并合并为单击事件。像这样的东西（未经测试，可能不起作用）：

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

【讨论】：

$(this).toggleClass('bbb aaa'); 会更好。
漂亮干净的解决方案。谢谢

【解决方案2】：

您需要使用单个切换事件。您设置了两次点击事件，这将不起作用。

jsfiddle

【讨论】：

【解决方案3】：

您正在寻找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');
        });
    });

【讨论】：