在扩展<div>
元素时遇到一些问题。
我有2 buttons
,一个在右上角,一个在左上角。每个按钮都会扩展隐藏区域。
我的问题是,当展开一个区域然后展开另一个区域时,它会在<div>
中创建更多空间。我不确定如何解决这个问题。 Here is a screenshot of the description above,我将包含必要的代码。谢谢你们!
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;
答案 0 :(得分:1)
当您显示一个空格时 - 只需确保隐藏另一个空格:
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;
答案 1 :(得分:0)
将以下代码添加到CSS。
.form-login, .form-register
{
position:absolute;
}