如何在点击时隐藏或显示div?

时间:2015-09-01 14:38:01

标签: javascript html

我试图创建一个按钮,如果它被隐藏则显示div,或者如果已经显示div(在javascript中执行),则隐藏div。我已经编写了这个代码用于onclick,但它似乎没有用,我不明白为什么。有人能看出我做错了吗?

if (document.getElementById('Hidey').style.display == 'none') {
document.getElementById('Hidey').style.display = 'inline'
}
else {
document.getElementById('Hidey').style.display = 'none'
}

编辑: HTML

<div id="Button" onclick="javascript posted above here"><h2>Click</h2></div>
<div id="Hidey">Content Inside</div>

HTML正在受影响,我的代码中没有任何其他内容影响这些。我只是感到困惑。

2 个答案:

答案 0 :(得分:0)

我在这里设置了一个傻瓜http://plnkr.co/edit/EkuW8nEIV22vmuaDM9JR?p=preview

<script>
  var toggle = function(){
    if (document.getElementById('Hidey').style.display == 'none') {
      document.getElementById('Hidey').style.display = 'inline'
    }
    else {
      document.getElementById('Hidey').style.display = 'none'
    }
  }

</script>

<h1 id="Hidey">Hello Plunker!</h1>
<a href="#" onclick="toggle()">click me</a>

您的代码似乎很好。我想你可能没有正确设置功能或正确调用功能。

答案 1 :(得分:-3)

使用jQuery并使用它:

$("button").onclick( function() {("#Hidey").toggle();});