Ich habe mich kürzlich mit JQuery beschäftigt und fand es toll, wie Sie Elemente ein- und ausblenden können, wenn ein Ereignis ausgelöst wird. Ich habe versucht, meiner Testwebsite eine einfache Funktion hinzuzufügen, die das Anmeldeformular anzeigt, wenn auf die Anmeldeschaltfläche geklickt wird. Wenn Sie jedoch erneut auf die Schaltfläche klicken, wird das Formular ausgeblendet. Die von mir verwendete JQuery-Funktion funktioniert nur einmal (wenn ich auf die Schaltfläche klicke und das Formular anzeige), aber nachdem das Formular angezeigt wird, passiert nichts, wenn ich erneut auf die Schaltfläche klicke.

JQuery-Code:

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-Schaltflächencode:

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

HTML Div Code:

<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>

Ich habe das Gefühl, dass das jquery-Skript nur einmal ausgeführt wird und dann beendet ist, aber ich könnte mich irren.