javascript 如何展开/折叠段落
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18567660/
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 expand / collapse paragraph
提问by Vinay Pratap Singh
I am trying to make a paragraph hidden unless someone actually clicks a button to show it.
我试图隐藏一个段落，除非有人真的点击了一个按钮来显示它。
Here's my Javascript:
这是我的 Javascript：
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
Here's my HTML code:
这是我的 HTML 代码：
<input type="button" onclick="return toggleMe('special1')" value="(click here for more information)"><br>
<p id="special1">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>
The button actually works perfectly. But the problem is that by default the text is shown and you click the button to collapse it. What do I need to change to make it be collapsed by default?
该按钮实际上工作得很好。但问题是默认情况下会显示文本，然后单击按钮将其折叠。我需要更改什么才能使其默认折叠？
回答by Denys Séguret
The simple solution :
简单的解决方案：
Change
改变
<p id="special1">
to
到
<p id="special1" style="display:none">
Another one if you have a CSS file :
如果你有一个 CSS 文件，另一个：
Add this to your CSS :
将此添加到您的 CSS 中：
#special1 { display: none; }
An alternative would be to define in CSS classes for the visible and hidden states, set the class in HTML and switch classes in your JS code.
另一种方法是在 CSS 类中定义可见和隐藏状态，在 HTML 中设置类并在 JS 代码中切换类。
回答by Billy Moon
See fiddle: http://jsfiddle.net/FCJ4c/
见小提琴：http: //jsfiddle.net/FCJ4c/
First, hide the object in question with css...
首先，用css隐藏有问题的对象......
#special1{ display: none }
Second, set up an event listener when the button is clicked, to toggle the target object...
其次，设置一个点击按钮时的事件监听器，来切换目标对象...
$(document).ready(function(){
$("#button-1").click(function(){
$("#special1").toggle()
})
})
回答by Vinay Pratap Singh
Use the Display:nonein css for hiding it.
and again Display:blockto make it visible when needed.
使用Display:nonein css 来隐藏它。并Display:block在需要时再次使其可见。
回答by rony36
Here is the fiddle: http://jsfiddle.net/rony36/K5syB/
这是小提琴：http: //jsfiddle.net/rony36/K5syB/
<input type="button" id="button-1" value="(click here for more information)"><br>
<p id="special1">
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
</p>
script:
脚本：
$(document).ready(function(){
var count = 0;
$("#special1").hide();
$("#button-1").click(function(){
count++;
if(count % 2 != 0){
$("#special1").show();
}else{
$("#special1").hide();
}
})
})
