jquery - 如何使切换（）在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

toggleevent 方法在 jQuery 1.8 中已被弃用并在 jQuery 1.9 中被删除，jQuery 1.9 使用toggledisplay 方法并隐藏你的元素。

您可以改为使用click和toggle 效果方法：

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

Answer 2

这比当前的答案略快：

$(function () {
   var switcher = $('#switcher');
   switcher.find('h3').click(function() {
     switcher.find('button').toggle();
  }); 
});

Answer 3

您需要一个click()处理程序h3，而不是toggle()处理程序。

然后你可以简单地使用或toggleClass()直接使用.toggle()$('#switcher button')

$(document).ready( function () {
  $('#switcher h3').click(function() {
   $('#switcher button').toggleClass('hide');
  });
}); 

Answer 4

该命令toggle()立即隐藏/取消隐藏元素。

您似乎正在寻找：

$(function () {
   $('#switcher h3').click(function() {
     $('#switcher button').toggle();
  }); 
});