jQuery 从隐藏文本开始，单击时显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19147610/
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
Start with Text hidden, show text onclick
提问by Barry Glick
This is all definitely over my head, but I had to ask. All I really want to do, is to start out with the text hidden, have only the SHOW button, and click on it to show the text. It is for a French Dictée site, where someone listens to a French phrase, writes what he thinks he hears in a form text field, then clicks the SHOW button to see if he got it right. I tried changing the P tag to visibility hidden, but then clicking on the SHOW button won't reveal it.
这绝对是我的头，但我不得不问。我真正想做的就是从隐藏文本开始，只有显示按钮，然后单击它以显示文本。这是一个法语 Dictée 网站，在那里有人听法语短语，在表单文本字段中写下他认为他听到的内容，然后单击“显示”按钮，看看他是否做对了。我尝试将 P 标签更改为隐藏的可见性，但是单击“显示”按钮不会显示它。
I searched under toggle, but none of the responses seemed to fit mine.
我在切换下搜索，但似乎没有一个响应适合我。
Here's the only answer from searching your site that comes close, but I can't make the text to start out hidden, then reveal it by clicking on the SHOW button.
这是搜索您的网站的唯一答案，但我无法使文本开始隐藏，然后通过单击“显示”按钮显示它。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Thanks for any help.
谢谢你的帮助。
Barry
巴里
Okay, yes, I've seen that, but that still will open ANY P tag on the page with display:none. What I want is to have individual passages capable of being revealed by clicking a button. These HIDE and SHOW buttons open EVERY paragraph.
好的，是的，我已经看到了，但是仍然会在页面上打开带有display:none. 我想要的是通过单击按钮可以显示单个段落。这些隐藏和显示按钮打开每个段落。
For example, on my site,
例如，在我的网站上，
http://techno-french.com/learning-french-online-free/learn-french-with-mouse-trap-dictee
http://techno-french.com/learning-french-online-free/learn-french-with-mouse-trap-dictee
I have two passages, one in French and one in English. I'd like users to be able to SHOW the French, while keeping the English hidden, and vice versa SHOW the English while keeping the French hidden. Possible? No? Yes?
我有两篇文章，一篇是法语，一篇是英语。我希望用户能够显示法语，同时隐藏英语，反之亦然，显示英语同时隐藏法语。可能的？不？是的？
As always, thanks for any help.
与往常一样，感谢您的帮助。
Barry
巴里
回答by PSL
Jquery hide and show can toggle element's displayproperty only, not visibility. You can either make the element display:noneinitially or change the visibilityinstead of hide/show.
Jquery hide 和 show 只能切换元素的display属性，不能切换可见性。您可以display:none最初创建元素或更改visibility而不是hide/show。
var $p = $('p');
$("#hide").click(function(){
$p.css('visibility', 'hidden');
});
$("#show").click(function(){
$p.css('visibility', 'visible');
});
or just:
要不就：
$("#hide, #show").click(function(){
$('p').css('visibility', this.id == "show" ? 'visible' : 'hidden');
});
or in the initial style set
或在初始样式集中
p{ /*This can vary based on which p you want to hide first*/
display: none; /*Instead of visibility*/
}
and just a shortened version.
并且只是一个缩短版。
$(document).ready(function () {
$("#hide, #show").click(function () {
$("p").toggle(this.id == "show");
});
});
Note that display property will take the element out of the page flow there wont be space reserved for it, in case of visibility you will see the empty space reserved by the element
请注意， display 属性会将元素从页面流中取出，不会为其保留空间，如果可见，您将看到元素保留的空白空间
回答by Luan Castro
try put the display:none will work
尝试放置显示器：无将工作
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p style="display:none">If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
回答by Ayushi Jha
I was looking for the answer as well, however, what worked for me was this small code of JQuery:
我也在寻找答案，但是，对我有用的是 JQuery 的这个小代码：
<div style="display: none;" id="hiddenText">This is hidden</div>
<a href="#" onclick="$('#hiddenText').show(); return false;">Click here to show hidden
text</a>
