1

我是 JQuery 的初学者，我想使用滑动切换功能显示隐藏的登录表单和隐藏的注册表单。我遇到的问题是，一旦我点击一个链接，表单就会出现，但它旁边的链接也会被推送，这取决于表单的宽度，这会破坏整个菜单的外观。有没有办法防止这种情况发生？

我的html部分代码是这样的：

<!-- Login Starts Here -->
<div id="loginContainer">
    <a href="#" id="loginButton"><span>LOGIN</span><em></em></a>
        <div id="loginBox" style="display:none">                
            <form id="loginForm">
            <!--FORM STUFF-->
            </form>
        </div>
</div>
<!-- Login Ends Here -->
<!-- Sign Up Starts Here -->
<div id="signUpContainer">
    <a href="#" id="signUpButton"><span>Sign Up</span><em></em></a>
        <div id="signUpBox" style="display:none">                
            <form id="signUpForm">
            <!--FORM STUFF-->
            </form>
        </div>
</div>

我的 JQuery 部分代码如下所示：

$(function () {
     $('#signUpButton').click(function () {
         $('#signUpBox').slideToggle(200);
         $(this).toggleClass("active");
     });
     $('#loginButton').click(function () {
         $('#loginBox').slideToggle(200);
         $(this).toggleClass("active");
     });
 });

我还制作了一个 jsfiddle 以更好地展示我遇到的问题：http: //jsfiddle.net/smsyr/3/

任何帮助，将不胜感激。非常感谢你！

4

4 回答 4

0

更改您的 HTML 标记

写 ：

<a href="#" id="loginButton"><span>LOGIN</span><em></em></a>
<a href="#" id="signUpButton"><span>SIGN UP</span><em></em></a>

这是小提琴。

于 2013-10-16T18:24:16.830 回答
0

这是因为元素的定位。如果您已经有一个带有样式的类/id，那么只需添加position: absolute;它，否则您需要创建一个类/id 来添加绝对值。看看小提琴，看看它是如何工作的。

这也是因为表单被包裹在一个div. 这个元素默认是一个块元素，它会根据它的宽度或高度按下第二个按钮。

#loginBox {
  position: absolute;
}

如果您有两个以上的下拉菜单，那么您将需要考虑重新编写您的设置方式。如果您将绝对值添加到所有表单，那么它们将一起粉碎，因为默认情况下它们都将左/上对齐：0。

JSFIDDLE

于 2013-10-16T18:32:02.557 回答
0

我修改了你的小提琴，所以我修改了以下 CSS 样式（结果在这里）：

#signUpContainer {
    font-size:12px;
    font-family:'Montserrat', Helvetica;
    float: left;
    width: 230px; /* here */
    background-color: #000;  /* here */
}

#loginContainer {
    font-size:12px;
    font-family:'Montserrat', Helvetica;
    float: left;
    width: 230px;  /*here*/
    background-color: #000;  /*here*/
}

我在 CSS 中添加了两个新项目：

#loginBox {
    background-color: #FFF;  /* or transparent */
}

#signUpBox {
    background-color: #FFF; /*or transparent*/
}
于 2013-10-16T18:35:57.720 回答
0

检查jfiddle的更新...

刚刚在表单 div 之外添加了链接..

<div class="something">
    <a href="#" id="signUpButton"><span>SIGN UP</span><em></em></a>
    <a href="#" id="loginButton"><span>LOGIN</span><em></em></a>  
</div>

在CSS中

.something {
    position:absolute;
    margin: 0 auto;
}
于 2013-10-16T18:38:54.590 回答