如何展开/折叠段落答案

【问题标题】：How to expand / collapse paragraph如何展开/折叠段落
【发布时间】：2013-09-02 07:23:36
【问题描述】：

我试图隐藏一个段落，除非有人真正点击按钮来显示它。

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

该按钮实际上可以正常工作。但问题是默认情况下会显示文本，然后单击按钮将其折叠。我需要更改哪些内容才能使其默认折叠？

【问题讨论】：

Add a "close" button to Expand-Collapse Paragraph 的可能重复项
使用 style="display:none" or or or $('#special1').hide();在你的脚本中

标签： javascript

【解决方案1】：

简单的解决方案：

改变

<p id="special1">

到

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

如果你有一个 CSS 文件，另一个：

将此添加到您的 CSS 中：

#special1 { display: none; }

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

【讨论】：

【解决方案2】：

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

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

#special1{ display: none }

其次，设置点击按钮时的事件监听，切换目标对象...

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

【讨论】：

【解决方案3】：

在 css 中使用 Display:none 来隐藏它。并再次Display:block 使其在需要时可见。

【讨论】：

【解决方案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();
          }
      })
  })

【讨论】：

【解决方案5】：

使用这个javascript完全隐藏

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

here上的更多属性

【讨论】：