如何使用 jquery 制作显示/隐藏切换按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7098367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make a show/hide toggle button with jquery
提问by billy
Hi I have been trying to make a show/hide toggle button with jquery but I can only find buttons that show a div but none that hide it
嗨，我一直在尝试使用 jquery 制作显示/隐藏切换按钮，但我只能找到显示 div 的按钮，但找不到隐藏它的按钮
below is one of the examples I found that shows a div but it doesn't let you hide it unless you click on another button. I would like to be able to use the same button to show and hide a div. I have multiple divs on my page and would like to be able to use jquery instead of javascript.
下面是我发现显示 div 的示例之一，但除非您单击另一个按钮，否则它不会让您隐藏它。我希望能够使用相同的按钮来显示和隐藏 div。我的页面上有多个 div，并且希望能够使用 jquery 而不是 javascript。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".buttons").click(function () {
var divname= this.value;
$("#"+divname).show("slow").siblings().hide("slow");
});
});
</script>
</head>
<body>
<div id="buttonsDiv">
<input type="button" id="button1" class="buttons" value="div1"></input>
<input type="button" id="button2" class="buttons" value="div2"></input>
<input type="button" id="button3" class="buttons" value="div3"></input>
<input type="button" id="button4" class="buttons" value="div4"></input>
</div>
<div>
<div id="div1" style="display:none">
Hello World
</div>
<div id="div2" style="display:none">
Test
</div>
<div id="div3" style="display:none">
Another Test
</div>
<div id="div4" style="display:none">
Final Test
</div>
</div>
</body>
</html>
回答by ShankarSangoli
Try this
尝试这个
$(".buttons").click(function () {
var divname= this.value;
$("#"+divname).slideToggle().siblings().hide("slow");
});
回答by atoMerz
Even simpler use control's own toggle function.
更简单的使用控件自己的切换功能。
$('.toggleButtons').click(function()
{
$('control1, control2, ...').toggle();
});
回答by Joseph Marikle
回答by Nachshon Schwartz
Switch your script with this:
用这个切换你的脚本：
<script>
$(document).ready(function(){
$(".buttons").click(function () {
$("#buttonsDiv div").hide()
var divname= this.value;
$("#"+divname).show();
});
});
</script>
回答by David says reinstate Monica
Assuming that you want all the other divs to be hidden when the new one is shown:
假设您希望div在显示新的时隐藏所有其他s：
$('.buttons').click(
function() {
$('div > div').hide();
$('div > div').eq($(this).index()).show();
});
回答by Guffa
You can use the togglemethod for showing and hiding an element. This will show/hide each div individually:
您可以使用该toggle方法来显示和隐藏元素。这将分别显示/隐藏每个 div：
$(".buttons").click(function () {
$("#" + this.value).toggle("slow");
});
回答by Tejs
That's a pretty simple script to make:
这是一个非常简单的脚本：
$('.buttons').click(function()
{
var elementToShowOrHide = $('#' + $(this).val());
if(elementToShowOrHide.is(':visible'))
elementToShowOrHide.hide();
else
elementToShowOrHide.show();
});
Each click on the button would then toggle the visibility of the other element.
每次单击按钮都会切换其他元素的可见性。
回答by red
The jQuery .toggle() method should help you:
jQuery .toggle() 方法应该可以帮助您：
$(".buttons").click(function () {
var divname= this.value;
$("#"+divname).toggle();
});
Source: http://api.jquery.com/toggle/
