Javascript:使用切换按钮隐藏和显示div标签

Question

我会正确的:

我需要做的是按下按钮隐藏一个特定的div,它应该是一个切换,所以基本上:按一次隐藏,再按一次显示,再按一次隐藏等...

我希望隐藏/显示规则在CSS中完成,并且在纯javascript中进行交互(请不要jquery).这是我需要做的,但我不太确定如何执行javascript代码.

HTML:

<p class="button">Show/hide<p>

<div> I want to hide this by pressing the button above</div>

CSS:

#showhide {
     display: none;
}

.button {
    display: block;
    height: 30px;
    width: 100px;
    background: green;
    text-align: center;
    padding-top: 10px;
    padding-left: 0px;
    font: 15px arial bold;
    border: 1px solid black;
    text-decoration: none;
    list-style:none;
    margin: 10px 0px 10px 0px;
}

http://jsfiddle.net/fyUJc/14/

此外,如果你认为这个问题不属于这里或者是愚蠢的,请尽量避免粗鲁,我只是想在这里学习.

Answer 1

你可以使用一种onclick方法.将您的HTML设为:

<p class="button" onclick="toggle_visibility('hideMe')">Show/hide</p>
<div id="hideMe">I want to hide this by pressing the button above</div>

并拥有以下JavaScript:

function toggle_visibility(id) 
{
    var e = document.getElementById(id);
    if (e.style.display == 'block' || e.style.display=='')
    {
        e.style.display = 'none';
    }
    else 
    {
        e.style.display = 'block';
    }
}

DEMO