jquery - 使用 JQuery slideToggle 显示不同的表单

Question

我是 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/

如有任何帮助，我们将不胜感激。非常感谢!

Answer 1

是因为元素的定位。如果你已经有一个带有样式的类/id，那么只需添加 position: absolute; ，否则你需要创建一个类/id 来添加绝对。查看 fiddle ，了解它的工作原理。

这也是因为表单被包装在 div 中。默认情况下，此元素是一个 block 元素，它将根据第二个按钮的宽度或高度将其向下推。

#loginBox {
  position: absolute;
}

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

JSFIDDLE