jQuery切换不工作和消失元素

Question

当我在我的网站上添加此内容时，所有div都会消失。怎么会发生什么？ jquery代码有什么问题？

Jquery的：

$( ".espacio" ).toggle(function() {
  $(this).removeClass("off").addClass("on");
}, function() {
  $(this).removeClass("on").addClass("off");
});

CSS：

.off {height:200px}
.on {height:400px}

任何帮助都会很棒！

Answer 1

由于 .toggle() event 已从版本1.8弃用并已在版本1.9中删除，因此您可以使用 .click() 使用 .toggleClass() 代替：

$(".espacio").click(function() {
    $(this).toggleClass('on off');
});

Answer 2

如果你想使用jQuery UI，你可以使用switchclass并添加缓动，动画。像

这样的东西

 $( ".espacio" ).click(function() {
    $(this)switchClass("off", "on", 1000, "easeInOutQuad");
     }, 
 function() {
   $(this).switchClass("on", "off", 1000, "easeInOutQuad");
});

查看jquery UI .switchClass here。

Answer 3

我们也可以在函数上使用jQuery

$(".espacio").on('click',function() {
    $(this).toggleClass('off on');
});