jquery - 如何使toggle()在jQuery中工作

Question

我正在一本关于 jQuery 的书中做一道题。我有以下 HTML:

<div id="switcher" class="switcher">
  <h3>Style Switcher</h3>
  <button id="switcher-default">Default</button>
  <button id="switcher-narrow">Narrow</button>
  <button id="switcher-large">Large</button>
</div>

我正在尝试通过单击标题来打开/关闭按钮。这是 jQuery:

$(document).ready( function () {
 $('#switcher h3').toggle(function() {
   $('#switcher button').addClass('hide');
}, function(){
   $('#switcher button').removeClass('hide');
}); 

由于某种原因，H3 元素(标题)在页面加载时立即隐藏，我无法选择它。真的，应该隐藏按钮，而不是 H3，对吗？

这是CSS:

.hide {
    display: none;
}

Answer 1

toggle 事件方法从 jQuery 1.8 开始已被弃用，并在 jQuery 1.9 中被删除，jQuery 1.9 使用 toggle 显示方法并隐藏您的元素。

您可以使用click和toggleeffect方法来代替:

$(document).ready( function () {
   $('#switcher h3').click(function(){
       $(this).siblings('button').toggle();
   })
});