JQuery slideToggle在頁面的錯誤部分滑落，然後跳回

我想創建一個簡單的登錄和註冊表單，您可以選擇登錄，如果您沒有登錄點擊註冊按鈕。然後，我想要註冊表單下拉，但是當我這樣做時，它會放下頁面的一面，然後彈出到它應該位於的中間位置。煩人它工作正常的小提琴here JQuery slideToggle在頁面的錯誤部分滑落，然後跳回

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Drive Control</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"> 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

    </head> 
    <body> 
     <div class="fluid-container"> 
      <div class="col-md-10 col-md-offset-1 text-center"> 
       <h1>Welcome To Drive Control</h1> 
      </div> 
     </div> 
     <div class="fluid-container signIn"> 
      <div class="col-md-4 col-md-offset-4"> 
       <form id="log" method="post"> 
        <div class="form-group"> 
         <label class="form-horizontal">Email</label> 
         <input class="form-control" type="text" name="email" placeholder="Email"> 
        </div> 
        <div class="form-group">  
         <label class="form-horizontal">Password</label> 
         <input class="form-control" type="password" name="pass" placeholder="Password"> 
        </div> 
         <button class="form-control btn btn-primary" type="submit">Sign In</button> 
       </form> 
       <div id="error"> 
        <p></p> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-4 col-md-offset-4"> 
      <button class="btn btn-danger btn-block signUpBtn">Sign Up</button> 
     </div> 
     <div class="fluid-container signUp"> 
      <div class="col-md-4 col-md-offset-4"> 
       <form action= method="post"> 
        <div class="form-group"> 
         <label class="form-horizontal">First Name</label> 
         <input class="form-control" type="text" name="fname" placeholder="Username"> 
        </div> 
        <div class="form-group"> 
         <label class="form-horizontal">Last Name</label> 
         <input class="form-control" type="text" name="lname" placeholder="Username"> 
        </div> 
        <div class="form-group"> 
         <label class="form-horizontal">Email</label> 
         <input class="form-control" type="text" name="email" placeholder="Email Address"> 
        </div> 
        <div class="form-group">  
         <label class="form-horizontal">Password</label> 
         <input class="form-control" type="password" name="pass" placeholder="Password"> 
        </div> 
         <button class="form-control btn btn-primary" type="submit">Submit</button> 
       </form> 
      </div> 
     </div> 

    </body> 
    </html>

來源

2017-04-09 frankpiazza

看來工作對我好。 – Neil

@ nfn-neil它在小提琴中的作用，但我認爲這是因爲它是一個小窗口，所以引導格式似乎幫助它，但問題發生在一個完整的Web瀏覽器，對不起，我沒有更清楚。 – frankpiazza

問題1：類名「容器流體」不流體的容器。

問題2：在未經COL-MD-4 COL-MD-偏移-4在類名.signIn liveOnFiddle

$(document).ready(function(){ 
 
$(".signUp").hide(); 
 

 
$(".signUpBtn").click(function(){ 
 
\t \t \t \t $(this).fadeOut("slow"); 
 
    \t $(".signIn").slideToggle("slow",function(){ 
 
    \t \t $(".signUp").slideToggle("slow"); 
 
    \t }); 
 
    }); 
 
})


 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"> 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    \t <title>Drive Control</title> 
 
\t 
 
<body> 
 
\t <div class="container-fluid"> 
 
\t \t <div class="col-md-10 col-md-offset-1 text-center"> 
 
\t \t \t <h1>Welcome To Drive Control</h1> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="container-fluid signIn"> 
 
\t \t <div class="col-md-4 col-md-offset-4"> 
 
\t \t \t <form id="log" method="post"> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label class="form-horizontal">Email</label> 
 
\t \t \t \t \t <input class="form-control" type="text" name="email" placeholder="Email"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> \t 
 
\t \t \t \t \t <label class="form-horizontal">Password</label> 
 
\t \t \t \t \t <input class="form-control" type="password" name="pass" placeholder="Password"> 
 
\t \t \t \t </div> \t 
 
\t \t \t \t \t <button class="form-control btn btn-primary" type="submit">Sign In</button> 
 
\t \t \t </form> 
 
\t \t \t <div id="error"> 
 
\t \t \t \t <p></p> 
 
\t \t \t </div> 
 
\t \t 
 
\t <button class="btn btn-danger btn-block signUpBtn">Sign Up</button> </div> 
 
\t </div> 
 
\t 
 
\t 
 
\t 
 
\t <div class="container-fluid signUp"> 
 
\t \t <div class="col-md-4 col-md-offset-4"> 
 
\t \t \t <form action="" method="post"> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label class="form-horizontal">First Name</label> 
 
\t \t \t \t \t <input class="form-control" type="text" name="fname" placeholder="Username"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label class="form-horizontal">Last Name</label> 
 
\t \t \t \t \t <input class="form-control" type="text" name="lname" placeholder="Username"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label class="form-horizontal">Email</label> 
 
\t \t \t \t \t <input class="form-control" type="text" name="email" placeholder="Email Address"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> \t 
 
\t \t \t \t \t <label class="form-horizontal">Password</label> 
 
\t \t \t \t \t <input class="form-control" type="password" name="pass" placeholder="Password"> 
 
\t \t \t \t </div> \t 
 
\t \t \t \t \t <button class="form-control btn btn-primary" type="submit">Submit</button> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t </div> 
 

 
</body>

的註冊按鈕

來源

2017-04-09 16:16:25

感謝這一切的偉大作品。尷尬，我弄錯了那個容器：s – frankpiazza

JQuery slideToggle在頁面的錯誤部分滑落，然後跳回

回答

相關問題