用一个按钮显示/隐藏div元素

Question

我最近一直潜入jquery,并喜欢在触发事件时如何显示/隐藏元素.我尝试在我的测试网站上添加一个简单的功能,当点击登录按钮时会显示登录表单,然后如果再次点击该按钮则隐藏表单; 我使用的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代码:

<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脚本只运行一次然后完成,但我可能是错的.

Answer 1

尝试使用 .toggle()

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

.class1
{
     color: orange;
}?

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

检查FIDDLE

Answer 2

没有必要使用内联JavaScript.

LIVE DEMO

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