Javascript：使用切换按钮隐藏和显示div标记

问题描述：

我会得到它：

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

What I need to do is hide a particular div with the press of a button, and it's supposed to be a toggle, so basically: Press once to hide, press again to show, press again to hide etc...

我想要隐藏/显示规则在CSS和纯javascript的交互（没有jquery请）。这是我需要做的，但我不太确定如何执行JavaScript代码。

I want the hide/show rules to be done in CSS and the interaction in pure javascript (no jquery please). Well this is what I need to do, but I'm not quite sure how to execute the javascript code.

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/

此外，如果您认为此问题不属于

Also, if you think this question doesn't belong here or is stupid, please try to refrain from being rude, I'm just trying to learn here.

答

你可以使用使用 onclick 方法。将您的HTML设为：

You can make use an onclick method. Have your HTML as:

<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：

And have the following 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

Javascript：使用切换按钮隐藏和显示div标记

相关推荐