使用按钮隐藏/取消隐藏div？

Question

    <h1>Welcome! Chat now!</h1>

    <button id="button">Chat Now</button>
    <button id="buttontwo">Chat Categories</button>



    <div id="login" style="visibility:hidden">
    <button id="closelogin">Close</button>
    <input type="text" placeholder="Username"/>
    <p id="loginshiz">Pick a username</p>
    <button id="go">Go</button>
    </div>

当按下立即聊天按钮时，我要使div出现“登录”，而当按下div内部的“ closelogin”按钮时，我要使整个div再次隐藏。 当前，如果未按任何按钮，则div应该处于隐藏状态，干杯！

Answer 1

使用jQuery。 没有办法做到纯HTML / CSS。

$('#button').click(function() {
    $('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
    $('#login').css('visibility', 'hidden');
});

如果您没有包括jQuery，请使用javascript：

document.getElementById('button').onclick = function() {
    document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
    document.getElementById('login').style.visibility = 'hidden';
}

Answer 2

看我的示例，不使用JavaScript。

    <input type="checkbox" id="box"/>
    <label id="container" for="box">
        <div id="button">Chat Now</div>
        <div id="login">
            <label for="box" id="closelogin">Close</label>
            <input type="text" placeholder="Username"/>
            <p id="loginshiz">Pick a username</p>
            <button id="go">Go</button>
        </div>
    </label>

和CSS

#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}

小提琴http://jsfiddle.net/LUdyb/1/

希望能有所帮助。

Answer 3

在按钮ID的帮助下使用javascript，可以通过将css属性更改为visible来使div隐藏。 使用jQuery时，您可以使用切换，隐藏，显示。

Answer 4

您无法在html / css中执行此操作

您可以使用Jquery

$('#button').click(function() {
    $('#login').css('visibility', 'visible');
});

关闭

$('#closelogin').click(function() {
    $('#login').css('visibility', 'hidden');
});

您只需要更改#closelogin和.css('visibility', 'hidden')的ID

您需要在页面的顶部或底部包含这样的Jquery库，以使其正常工作。

例如：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>