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

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

jsfiddle

Answer 2

使用翻转而不是显示/隐藏和toggleClass而不是添加/删除，并合并成一个单一的点击事件。像这样的东西（未经测试，可能无法正常工作）：

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

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