一键显示/隐藏div元素

Question

我最近一直在研究 jquery，并且喜欢在触发事件时显示/隐藏元素的方式。我尝试向我的测试网站添加一个简单的功能，该功能将在单击登录按钮时显示登录表单，然后在再次单击该按钮时隐藏该表单；我正在使用的 jquery 函数只工作一次（当我单击按钮并显示表单时）但是在显示表单之后如果我再次尝试单击按钮没有任何反应。

查询代码：

 function displayLoginBox(){

if ($("#login_Box_Div:hidden")){

        $("#login_Box_Div").show();
        $("#buttonLogin").css('color', '#FF0');

}
else if($("#login_Box_Div:visible")){

        $("#login_Box_Div").hide();
        $("#buttonLogin").css('color','white');
}
}

HTML 按钮代码：

 <h3> <a href= "#">Pictio  </a> <button id = "buttonLogin" onclick = "displayLoginBox()">LogIn</button></h3>

HTML 分区代码：

 <div id = "login_Box_Div">
        <form name = "myform" >
            <input type = "text" name = "username" placeholder = "Username"  />
            <input type = "password" name = "password" placeholder= "Password" />
            <input type = "submit" id = "submitLogin" />
        </form>

</div>

我感觉 jquery 脚本只运行一次然后就结束了，但我可能错了。

原文由 Wp3Dev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试使用 .toggle()

 $('#buttonLogin').on('click', function(e){
    $("#login_Box_Div").toggle();
    $(this).toggleClass('class1')
});​

.class1
{
     color: orange;
}​

您可以使用 toggleClass() 切换按钮的类

检查FIDDLE

原文由 Sushanth – 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

无需使用内联 javascript。

现场演示

$('#buttonLogin').click(function(){
   $('#login_Box_Div').toggle();
});

原文由 Roko C. Buljan 发布，翻译遵循 CC BY-SA 3.0 许可协议