javascript - 使用按钮隐藏/取消隐藏 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 内的“关闭登录”按钮时，我想让整个 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';
}