用按钮隐藏/取消隐藏div？答案

【问题标题】：Hide/unhide div with button?用按钮隐藏/取消隐藏div？
【发布时间】：2014-01-18 11:34:52
【问题描述】：

    <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 应该处于隐藏状态，干杯！

【问题讨论】：

利用javascript
到目前为止你尝试过什么？

标签： javascript html css

【解决方案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';
}

【讨论】：

是的，它从 id(#button, #closelogin) 获取点击事件。它是哪种类型的元素并不重要，只要它有那个 id。

【解决方案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/

希望对您有所帮助。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

在 html/css 中你无法做到这一点

你可以使用 Jquery

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

关闭

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

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

您需要在页面的头部或底部包含这样的 Jquery 库才能使其正常工作。

例如：

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

【讨论】：