Jquery toggleClass不適用於元素

Question

我試圖應用toggleClass，但它不應用新類。 發生了什麼事？

<a href="#" id="cf_onclick">Click</a> 
<div id="main" class="invisible"> 
Hi there    
</div> 

.invisible{ 
    opacity: 0; 

} 
.visible{ 
    opacity: 1; 
    -webkit-transition: opacity 3s ease-in-out; 
    -moz-transition: opacity 3s ease-in-out; 
    -o-transition: opacity 3s ease-in-out; 
    transition: opacity 3s ease-in-out; 
} 


$(document).ready(function() { 
    $("#cf_onclick").click(function() { 
    $("#main").toggleClass("visible"); 
}); 
}); 

這裏的的jsfiddle

http://jsfiddle.net/Gilgamesh415/grxQX/17/

Answer 1

如果你的意思你的小提琴，你忘了添加jQuery庫，在窗口的jsfiddle的左上角。

檢查here

如果你的意思是你的網站查詢你必須通過增加<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>裏面你的頭標記加載jQuery庫。

Answer 2

並嘗試使用自調用匿名函數：

(function(){ 
.... //your code 
}(jQuery)); 

，而不是

$(document).ready(function(){...}); 

因爲最好的做法是在頁面的底部加載腳本，剛剛閉幕</body>標記之前，你不需要檢查文檔是否已經加載（$（document）.ready（）），它已經有了。

像這樣http://jsfiddle.net/micka/94pNW/

Answer 3

$("#cf_onclick").click(function(e) { 
    e.preventDefault(); 
    $("#main").toggleClass("invisible").toggleClass("visible"); 
}); 

http://jsfiddle.net/grxQX/18/

Answer 4

試試這個：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#s").click(function(){ 

$("#main").toggleClass("n"); 
}); 
}); 
</script> 



<div id="main" class="m"></div> 
<button id="s">click</button> 

<style type="text/css"> 
    .m 
{ opacity:0;} 
.n 
{ 
width:100px; 
    height:100px; 
    border:2px solid yellow; 
    background:green; 
    -webkit-transition: opacity 3s ease-in-out; 
    -moz-transition: opacity 3s ease-in-out; 
    -o-transition: opacity 3s ease-in-out; 
    transition: opacity 3s ease-in-out; 
    opacity: 1; 
} 
</style> 

演示在這裏：http://jsfiddle.net/65Hg4/1/