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和toggle 效果方法：

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

Answer 2

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

然后，您可以在$('#switcher button')上使用toggleClass()或简单toggle()。

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

Answer 3

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

您似乎在寻找：

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

Answer 4

这比目前的答案略快：

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

如何使toggle（）在jQuery中工作

4 个答案: