隐藏/取消隐藏div按钮？ [英] Hide/unhide div with button?

问题描述

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

When the chat now button is pressed, I want to make the div "login" appear, and when the "closelogin" button inside the div is pressed, I want to make the whole div hidden again. Currently if no buttons are pressed the div should be at hidden state, cheers!

推荐答案

看看我的示例，不使用JavaScript。

Look at my example without using of 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

and css

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

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

希望得到这个帮助。

这篇关于隐藏/取消隐藏div按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！