Javascript Jquery toggleClass无法应用于元素

我正在尝试应用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");
});
});

你好
.无形的{
不透明度：0；
}
.可见{
不透明度：1；
-webkit转换：不透明度3s易于输入输出；
-moz转换：不透明度3秒，易于输入输出；
-o型过渡：不透明度3s，易于输入输出；
转换：不透明度3s，易于输入输出；
}
$（文档）.ready（函数（）{
$（“#cf_onclick”）。单击（函数（）{
$（“#主”）.toggleClass（“可见”）；
});
});

这是JSFIDLE

---

如果您指的是您的小提琴，那么您忘了在JSFIDLE窗口的左上角添加

jQuery

库

检查

---

如果您是指您的网站检查，您可以通过在头部标记中添加

来加载jQuery库。

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

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

而不是

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

由于最佳做法是在页面底部加载脚本，就在关闭

标记之前，您不需要检查文档是否已加载（$（document.ready（）），它已经加载了

像这样

试试这个：

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

$（文档）.ready（函数（）{
$（“#s”）。单击（函数（）{
$（“#main”）.toggleClass（“n”）；
});
});
点击
M
{不透明度：0；}
N
{
宽度：100px；
高度：100px；
边框：2倍纯黄色；
背景：绿色；
-webkit转换：不透明度3s易于输入输出；
-moz转换：不透明度3秒，易于输入输出；
-o型过渡：不透明度3s，易于输入输出；
转换：不透明度3s，易于输入输出；
不透明度：1；
}

---

此处演示：

@LineyHamilton，您是否在页面上添加了jQuery库？@LineyHamilton，好的。好!！如果答案有用，请接受。

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