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

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

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

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

Answer 2

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

你似乎在寻找：

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

Answer 3

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 4

这比目前的答案略快：

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