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