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上的代码。

- Moshiur Rahman

---

抱歉，我无法添加链接。而且我也不明白提示的含义。这就是为什么我将链接分开以便发布。我不知道如何正确地添加CodePen链接。 - Moshiur Rahman

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();
});

- seunggabi

---

谢谢。这对我有用。我会标记它为有用的。 - Moshiur Rahman

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>

- rafaelcastrocouto

---

谢谢。这对我有用。我没有意识到在那里提供一个ID是很重要的。实际上，我注意到了这一点。我甚至不关心这个。再次感谢。我会把它标记为有帮助的。 - Moshiur Rahman

Answer 3

只需更改您的HTML标记

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

to

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

- Shakil Hossain