如何展开/折叠段落

Question

我试图隐藏一个段落，除非有人实际单击一个按钮以显示它。

这是我的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>

这是我的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>

该按钮实际上工作完美。 但是问题在于默认情况下会显示文本，然后单击按钮将其折叠。 我需要更改什么以使其默认折叠？

Answer 1

简单的解决方案：

更改

<p id="special1">

至

<p id="special1" style="display:none">

如果您有CSS文件，请另外一个：

将此添加到您的CSS中：

#special1 { display: none; }

一种替代方法是在CSS类中为可见和隐藏状态定义，在HTML中设置该类并在JS代码中切换类。

Answer 2

参见小提琴： http : //jsfiddle.net/FCJ4c/

首先，使用CSS隐藏有问题的对象...

#special1{ display: none }

其次，在单击按钮时设置事件侦听器，以切换目标对象...

$(document).ready(function(){
    $("#button-1").click(function(){
          $("#special1").toggle()
    })
})

Answer 3

使用CSS中的Display:none隐藏它。 再次使用Display:block使它在需要时可见。

Answer 4

这是小提琴： 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>

脚本：

  $(document).ready(function(){
      var count = 0;
      $("#special1").hide();

      $("#button-1").click(function(){
          count++;
          if(count % 2 != 0){
            $("#special1").show();
          }else{
              $("#special1").hide();
          }
      })
  })

Answer 5

使用此javaScript完全隐藏

parent.document.getElementById('id').style.display='none';

这里有更多属性