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';

here

上的更多属性

如何扩展/折叠段落

5 个答案:

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