javascript - 显示/隐藏文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8346863/
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
javascript - Show/Hide text
提问by Emelie Torefalk
I'm not good with programming, so I really would like some help.
我不擅长编程，所以我真的很想得到一些帮助。
I need a code that shows and hides a text when you click on a certain sentence. I have searched a lot over the Internet but I can't find something that works. Here is one of the codes that I have found. I would be happy if someone could help me and give me a working code!
我需要一个代码，当您单击某个句子时显示和隐藏文本。我在互联网上搜索了很多，但我找不到有用的东西。这是我找到的代码之一。如果有人可以帮助我并给我一个工作代码，我会很高兴！
回答by Wouter Dorgelo
You can use jQuery's Toggle: http://api.jquery.com/toggle/
您可以使用 jQuery 的切换：http: //api.jquery.com/toggle/
Because you're new to programming, you might want to watch these video series about jQuery: http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
因为您是编程新手，您可能想观看这些关于 jQuery 的视频系列：http: //blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
Alternative solution without jQuery:
没有 jQuery 的替代解决方案：
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>Hello world</h1></div>
You can also have a look at the related questions on the right of this page :-)
您也可以查看本页右侧的相关问题:-)
回答by GG.
You can use .toggle()function from jQuery, a JavaScript framework:
您可以使用JavaScript 框架jQuery 中的.toggle()函数：
HTML:
HTML：
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
jQuery:
jQuery：
$(function(){
$('p').click(function(){
$(this).toggle();
});
});
But if you hide the text, you can't click on to redisplay it. So you need to find a clickable visual aid to redisplay the text. I let you think about it. :)
但是如果你隐藏了文本，你就不能点击重新显示它。所以你需要找到一个可点击的视觉辅助来重新显示文本。我让你考虑一下。:)
回答by Fecious Finny
I'm not exactly sure that this would work, but you could try putting a blank picture over the text you want to hide and when you want to view the text, just remove the blank square. I'm not exactly 100% sure it would work though. I'm not as good at javascript as I am with C++.
我不确定这是否可行，但您可以尝试在要隐藏的文本上放置一张空白图片，当您要查看文本时，只需删除空白方块即可。不过，我并不完全 100% 确定它会起作用。我在 javascript 方面不如在 C++ 方面那么好。
回答by LifeiSHot
Perhaps you missed the world's best example on this website: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
也许你错过了这个网站上世界上最好的例子：https: //www.w3schools.com/howto/howto_js_toggle_hide_show.asp
The tutorial shows using pure HTML with JavaScript to do the job!
本教程展示了使用纯 HTML 和 JavaScript 来完成这项工作！
