javascript 单击按钮时显示隐藏的 div（幻灯片）（更改文本）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14126055/
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
Show hidden div (slide) when click on button (change text)
提问by Jai
I have a page where I want to hide some content (#hidden_content) as default. On this page there is a CSS button with text example "Show content".
我有一个页面，我想在其中默认隐藏一些内容 (#hidden_content)。在此页面上有一个带有文本示例“显示内容”的 CSS 按钮。
When click on this button I want the div #hidden_content to show with a slide effect and at the same time the text on the button "Show content" will change to example "Hide content" and when click the content will hide again.
单击此按钮时，我希望 div #hidden_content 以幻灯片效果显示，同时按钮“显示内容”上的文本将更改为示例“隐藏内容”，单击时内容将再次隐藏。
Button
按钮
<a href="" id="button" class="button_style">Show content</a>
Div
分区
<div id="hidden_content">Content</div>
Slide script
幻灯片脚本
$(document).ready(function(){
$("#button").click(function(){
$("#hidden_content").slideToggle("slow");
});
});
Now I want the text on the button so change when click. How do I do that?
现在我想要按钮上的文本，以便在单击时更改。我怎么做？
Thanks.
谢谢。
回答by Jai
Try this one: http://jsfiddle.net/dRpWv/1/
试试这个：http: //jsfiddle.net/dRpWv/1/
$(document).ready(function() {
$("#button").toggle(function() {
$(this).text('Hide Content');
}, function() {
$(this).text('show Content');
}).click(function(){
$("#hidden_content").slideToggle("slow");
});
});
回答by doctorless
jQuery has a text()function:
jQuery 有一个text()功能：
$("#button").text("change");
You can use this in your function:
你可以在你的函数中使用它：
$(document).ready(function(){
$("#button").click(function(){
$("#hidden_content").slideToggle("slow");
$("#button").text("change");
});
});
You can base it on whether or not the content is hidden:
您可以根据内容是否隐藏来判断：
$("#button").text($("#hidden_content").is(":hidden")?"Show content":"Hide content");
Make sure you use this after the content has been toggled.
确保在切换内容后使用它。
回答by LeGEC
From the slideToggle doc page: you can add a callback which will be executed once the animation is completed
从slideToggle doc页面：您可以添加一个回调，该回调将在动画完成后执行
$('#hidden_content').sliddeToggle('slow', function(){
if( $('#hidden_content').is(':hidden') ){
$('#button').text('Show content');
} else {
$('#button').text('Hide content');
}
})
回答by Ramesisiii
According to w3schools, the event method toggle()is removed after version 1.9. (Note: This is the event methodtoggle(), not the effect methodtoggle(). The effect method toggle() stays.)
根据 w3schools 的说法，事件方法toggle()在 1.9 版本之后被移除。（注意：这里是事件方法toggle()，不是效果方法toggle()。效果方法toggle()保持不变。）
Jai's answeris great, so I used his answer and modified it using ifand elseinstead of toggle().
Jai 的回答很棒，所以我使用了他的回答并使用ifandelse代替了 进行了修改toggle()。
$(document).ready(function() {
$(".button").click(function(){
if($(this).text() == 'Show Content')
$(this).text('Hide Content');
else
$(this).text('Show Content');
$("#hidden_content").slideToggle("slow");
});
});
Try it on JSFiddle Here.
在 JSFiddle Here上尝试一下。
