我最近一直潜入
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脚本只运行一次然后完成,但我可能是错的.
解决方法
尝试使用.toggle()
$('#buttonLogin').on('click',function(e){
$("#login_Box_Div").toggle();
$(this).toggleClass('class1')
});
.class1
{
color: orange;
}
您可以使用toggleClass()切换按钮的类
