1

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

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

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

4

5 回答 5

2

简单的解决方案：

改变

<p id="special1">

至

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

另一个如果你有 CSS 文件：

将此添加到您的 CSS 中：

#special1 { display: none; }

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

于 2013-09-02T07:24:28.407 回答
2

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

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

#special1{ display: none }

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

$(document).ready(function(){
    $("#button-1").click(function(){
          $("#special1").toggle()
    })
})
于 2013-09-02T07:44:24.660 回答
1

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

于 2013-09-02T07:25:52.220 回答
1

这是小提琴：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();
          }
      })
  })
于 2013-09-02T07:34:37.810 回答
0

使用此 JavaScript 完全隐藏

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

更多属性在这里

于 2013-09-02T07:26:40.087 回答