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

如果您的意思是小提琴，则忘记在jsfiddle窗口的左上角添加jQuery库。

检查here

如果你的意思是你的网站检查你加载了jQuery库，你可以在标题中添加<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>。

Answer 2

试试这个：

 <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/

Answer 3

尝试使用自动调用匿名函数：

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

而不是

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

由于最佳做法是在页面底部加载脚本，就在结束</body>标记之前，您无需检查文档是否已加载（$（document）.ready（）），它已经有了。

喜欢这个http://jsfiddle.net/micka/94pNW/

Answer 4

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

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

Jquery toggleClass不适用于元素

4 个答案: