jquery - .toggle() 只隐藏它的目标元素，而不是在交替点击时切换状态

Question

我正在尝试创建一个按钮，该按钮可以在每次单击时切换两个元素的可见性......这在几天前工作正常，但现在在页面加载时它隐藏了按钮。我发现 .toggle 也可以显示/隐藏元素，但是如何使用它在交替点击时在功能之间切换？

JS：

$("#button").toggle(
     function(){
          $('#stuff1').hide("slow");
          $('#stuff2').show("slow");
     },
     function(){ 
          $('#stuff1').show("slow");
          $('#stuff2').hide("slow"); 
     }
);

HTML：

<img id="button" src="button.jpg"/>
<p id="stuff1">stuff</p> 
<p id="stuff2">stuff</p>

Answer 1

它停止为您工作的原因是因为此toggle重载在 1.8 中已被弃用，但您没有注意到，并在 1.9 中被删除，直到现在您才注意到：

.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )

不推荐使用的版本：1.8，已删除：1.9

使用使用toggle功能：

$("#button").click(function(){
      $('#stuff1').toggle("slow");
      $('#stuff2').toggle("slow");
});

Answer 2

试试这个

jQuery

$("#button").click(
     function(){         
          $('#stuff1').toggle("slow");
          $('#stuff2').toggle("slow");
     }

);

CSS

#stuff1
{
    display:none;
}