<div>双重扩展,html和<div>构建问题

时间:2016-11-07 20:18:25

标签: javascript jquery html css

在扩展<div>元素时遇到一些问题。

我有2 buttons,一个在右上角,一个在左上角。每个按钮都会扩展隐藏区域。

我的问题是,当展开一个区域然后展开另一个区域时,它会在<div>中创建更多空间。我不确定如何解决这个问题。 Here is a screenshot of the description above,我将包含必要的代码。谢谢你们!

&#13;
&#13;
function main() {

  $('.form-login').hide();
  $('.form-register').hide();
  $('.sub-elements').hide();

  $('.main-elements').on('click', function() {
    $(this).find('.sub-elements').slideToggle(300);
  });

  $('.login-button').on('click', function() {
    $('.form-login').slideToggle(300);
  });
  $('.register-button').on('click', function() {
    $('.form-register').slideToggle(300);
  });


}
$(document).ready(main);
&#13;
.form-login {
  border-style: dashed;
  border-color: green;
  margin: 25px 1000px 0px 0px;
  width: 15%;
  color: whitesmoke;
  font-family: 'sans-serif';
  font-size: 14px;
}
.form-register {
  border-style: dashed;
  border-color: blue;
  margin-left: 1110px;
  width: 15%;
  color: whitesmoke;
  font-family: 'sans-serif';
  border-style: dashed;
  border-color: purple;
  font-size: 14px;
  margin-top: 10px;
}
.header {
  font-size: 125px;
  text-align: center;
  width: auto;
  border-style: dashed;
  border-color: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <button class="login-button">Login</button>
  <button class="register-button">Register</button>
  <div class="form-login">
    <form>
      Email
      <br>
      <input type="text" name="email">
      <br>Password
      <br>
      <input type="text" name="password">
      <br>
    </form>
  </div>
  <div class="form-register">
    <form>
      First Name
      <br>
      <input type="text" name="email">
      <br>LastName
      <br>
      <input type="text" name="password">
      <br>Email Adress
      <br>
      <input type="text" name="email">
      <br>Password
      <br>
      <input type="text" name="password">
      <br>Re-Enter Password
      <br>
      <input type="text" name="password">
      <br>
    </form>
  </div>
  <img src="images/iceland.png" alt="Downtown" height="30%" width="55%" />
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

当您显示一个空格时 - 只需确保隐藏另一个空格:

&#13;
&#13;
function main(){

  $('.form-login').hide();
  $('.form-register').hide();
  $('.sub-elements').hide();

  $('.main-elements').on('click',function(){
      $(this).find('.sub-elements').slideToggle(300);
   });

   $('.login-button').on('click',function(){
     $('.form-register').slideUp(300);
      $('.form-login').slideToggle(300);
   });
   $('.register-button').on('click',function(){
     $('.form-login').slideUp(300);
      $('.form-register').slideToggle(300);
   });


}
$(document).ready(main);
&#13;
.form-login{
  border-style: dashed;
  border-color: green;
  margin: 25px 1000px 0px 0px;
  width: 15%;
  color: whitesmoke;
  font-family: 'sans-serif';
  font-size: 14px;
}

.form-register{
  border-style: dashed;
  border-color: blue;
  margin-left: 1110px;
  width: 15%;
  color: whitesmoke;
  font-family: 'sans-serif';
  border-style: dashed;
  border-color: purple;
  font-size: 14px;
  margin-top: 10px;


}

.header {
  font-size: 125px;
  text-align:center;
  width: auto;
  border-style: dashed;
  border-color: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "header">
            <button class = "login-button">Login</button>
            <button class = "register-button">Register</button>
            <div class = "form-login">
              <form>
                Email<br>
                <input type = "text" name = "email"><br>
                Password<br>
                <input type = "text" name = "password"><br>
              </form>
            </div>
            <div class = "form-register">
              <form>
                First Name<br>
                <input type = "text" name = "email"><br>
                LastName<br>
                <input type = "text" name = "password"><br>
                Email Adress<br>
                  <input type = "text" name = "email"><br>
                Password<br>
                  <input type = "text" name = "password"><br>
                Re-Enter Password<br>
                  <input type = "text" name = "password"><br>
              </form>
            </div>
            <img src = "images/iceland.png" alt = "Downtown" height="30%" width="55%"/>
          </div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

将以下代码添加到CSS。

.form-login, .form-register
{
    position:absolute;
}