jQuery SlideUp和SlideDown无法正常工作

Question

我正在处理一个简单的登录注册表单，其中登录和注册停留在一个页面中。最初注册部分是隐藏的。当我单击注册时，登录部分将使用slideup向上注册，而注册部分将使用slideDown向下注册。反之亦然。

但是以某种方式它不起作用。

$(document).ready(function(){
  
$("#signup").click(function(){
	$("#log").slideUp("slow", function(){
		 $("#reg").slideDown("slow");
	});
 
});

// $("#signin").click(function(){
// 	$("#reg").slideUp("slow", function(){
// 		$("#log").slideDown("slow");
// 	});
// });


});

body{
	margin: 0;
	padding: 0;
}

form {
	text-align: center;
}

.wrapper {
	background: url("../img/bg/note.jpeg");
	background-size: 100%;
	width: 100%;
	height: 100%;
	min-height: 900px;
}

.login_box { 
	position: relative;
	margin-right: auto;
	margin-left: auto;
	top: 7%;
	width: 35%;
	background-color: #ffffff;
	border: 1px solid #EDEDED;
	border-radius: 7px;
	padding: 5px;
	opacity: 0.95;

}

.login_header {
	width: 100%;
	height: 100%;
	background-color: #3498db;
	color: #fff;
	text-align: center;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

input[type='submit']{
	background-color: #3498db;
	border: 1px solid #3498db;
	border-radius: 3px;
	margin: 5px 0 10px 0;
	padding: 5px 10px 5px 10px;
	color: #2C6C96;
	text-shadow: #7386E2 0.5px 0.5px 0;
	font-size: 100%;
}

input[type='text'],input[type='email'],input[type='password'] {
	border: 1px solid #e5e5e5;
	margin-top: 5px;
	width: 70%;
	height: 35px;
	margin-bottom: 10px;
	padding-left: 5px;
}

input[type='text']:hover,input[type='email']:hover,input[type='password']:hover {	

	border-color: #3498db;
}

a {
	text-decoration: none;
	color: #3498db;
}

#reg {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log">
	<form action="register.php" method="POST">
		<input type="email" name="log_email" placeholder="Email" required>
		<br>
		<input type="password" name="log_pass" placeholder="Password">
		<br>
		<input type="submit" name="login" value="Login">
		<br>
		<a href="" id="signup" class="signup">Need an account? Register Here!</a>
		<br>
	</form>
	</div>
<br>
	<div id="reg">
	<form action="register.php" method="POST">

	<input type="text" name="reg_fname" placeholder="First Name" required>

	<br> 
	<input type="text" name="reg_lname" placeholder="Last Name" required>

	<br>

	<input type="email" name="reg_email" placeholder="Email" required>


	<br>
	<input type="password" name="reg_pass" placeholder="Password" required>
	<br>
	<input type="password" name="reg_con_pass" placeholder="Confirm password" required>

	<br>
	<input type="submit" name="register" value="Register">
	<br>
	<a href="" id="signin" class="signin">Already have an account? Login Here!</a>
	<br>


	</form>
	</div>

这是我在Codepen中的代码

Answer 1

在您的代码中更改

<span id="signin" class="signin">Already have an account? Login Here!</span>

<a>刷新页面。

另一种方式。

$("#signup").click(function(event){
    $("#log").slideUp("slow", function(){
         $("#reg").slideDown("slow");
    });
    // event prevent!!!!!!!!!!!!!
    event.preventDefault();
});

Answer 2

这是使它起作用的一种方法，请注意链接href中的更改：

通过使用<a href="#id">可以防止默认的重新加载，如果未加载JS和CSS，它将滚动到HTML的正确部分。

$(document).ready(function(){
  
  $("#signup").click(function(e){
    $("#log").slideUp("slow", function(){
       $("#reg").slideDown("slow");
    });
  });
  
  $("#signin").click(function(e){
    $("#reg").slideUp("slow", function(){
       $("#log").slideDown("slow");
    });
  });
  
});

body{
	margin: 0;
	padding: 0;
}

form {
	text-align: center;
}

.wrapper {
	background: url("../img/bg/note.jpeg");
	background-size: 100%;
	width: 100%;
	height: 100%;
	min-height: 900px;
}

.login_box { 
	position: relative;
	margin-right: auto;
	margin-left: auto;
	top: 7%;
	width: 35%;
	background-color: #ffffff;
	border: 1px solid #EDEDED;
	border-radius: 7px;
	padding: 5px;
	opacity: 0.95;

}

.login_header {
	width: 100%;
	height: 100%;
	background-color: #3498db;
	color: #fff;
	text-align: center;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

input[type='submit']{
	background-color: #3498db;
	border: 1px solid #3498db;
	border-radius: 3px;
	margin: 5px 0 10px 0;
	padding: 5px 10px 5px 10px;
	color: #2C6C96;
	text-shadow: #7386E2 0.5px 0.5px 0;
	font-size: 100%;
}

input[type='text'],input[type='email'],input[type='password'] {
	border: 1px solid #e5e5e5;
	margin-top: 5px;
	width: 70%;
	height: 35px;
	margin-bottom: 10px;
	padding-left: 5px;
}

input[type='text']:hover,input[type='email']:hover,input[type='password']:hover {	

	border-color: #3498db;
}

a {
	text-decoration: none;
	color: #3498db;
}

#reg {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log">
	<form action="register.php" method="POST">
		<input type="email" name="log_email" placeholder="Email" required>
		<br>
		<input type="password" name="log_pass" placeholder="Password">
		<br>
		<input type="submit" name="login" value="Login">
		<br>
		<a href="#reg" id="signup" class="signup">Need an account? Register Here!</a>
		<br>
	</form>
	</div>
<br>
	<div id="reg">
	<form action="register.php" method="POST">

	<input type="text" name="reg_fname" placeholder="First Name" required>

	<br> 
	<input type="text" name="reg_lname" placeholder="Last Name" required>

	<br>

	<input type="email" name="reg_email" placeholder="Email" required>


	<br>
	<input type="password" name="reg_pass" placeholder="Password" required>
	<br>
	<input type="password" name="reg_con_pass" placeholder="Confirm password" required>

	<br>
	<input type="submit" name="register" value="Register">
	<br>
	<a href="#log" id="signin" class="signin">Already have an account? Login Here!</a>
	<br>


	</form>
	</div>

Answer 3

只需更改html标记

<a href="" id="signin" class="signin">Already have an account? Login Here!</a>

到

<a href="javascript:void(0)" id="signin" class="signin">Already have an account? Login Here!</a>