Question

我正在尝试创建一个“登录”按钮，单击该按钮将显示一个动画下拉菜单。下拉菜单将包含三个输入，“用户名”，“密码”和“提交”。用户随后可以再次单击“登录”按钮以缩回菜单。

我目前的代码： http://jsfiddle.net/StacksOnStacksOverHoes/4uhKN/

HTML：

<!DOCTYPE html>

<title>Home Page</title>
<!--Links to Temporary CSS page-->
<!-- Link to Google Jquery API -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!--Temporary JavaScript file--></script>

<body>
    <div class="site_header">
        <div id="nav">
            <ul>
            <li><a href="#">Home</a></li><li>
            <a href="#">Products</a>
                <ul>
                    <li><a href="#">Surrogacy</a>
                        <ul>
                            <li><a href="#">Learn More</a></li>
                            <li><a href="#">Applications</a></li>
                            <li><a href="#">Reporting Form</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Egg Donor</a>
                        <ul>
                            <li><a href="#">Learn More</a></li>
                            <li><a href="#">Applications</a></li>
                            <li><a href="#">Reporting Form</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Cryogenic Storage</a>
                        <ul>
                            <li><a href="#">Learn More</a></li>
                            <li><a href="#">Applications</a></li>
                            <li><a href="#">Reporting Form</a></li> 
                        </ul>                         
                    </li>
                    <li><a href="#">Infant Care</a>
                        <ul>
                            <li><a href="#">Learn More</a></li>
                            <li><a href="#">Applications</a></li>
                            <li><a href="#">Reporting Form</a></li> 
                        </ul>                        
                    </li>
                    <li><a href="#">Judgment or Asset<br>Liability</a>
                        <ul>
                            <li><a href="#">Learn More</a></li>
                            <li><a href="#">Applications</a></li>
                            <li><a href="#">Reporting Form</a></li> 
                        </ul> 
                    </li>
                </ul>
            </li><li>
            <a href="#">About Us</a></li><li>
            <a href="#">Contact Us</a>
                <ul>
                    <li><a href="#">dropdown item #01</a></li>
                    <li><a href="#">dropdown item #02</a></li>
                    <li><a href="#">dropdown item #03</a></li>
                    <li><a href="#">dropdown item #04</a></li>
                    <li><a href="#">submenu #02</a>
                        <ul>
                            <li><a href="#">submenu item #01</a></li>
                            <li><a href="#">submenu item #02</a></li>
                            <li><a href="#">submenu item #03</a></li>
                            <li><a href="#">submenu item #04</a></li>
                        </ul>
                    </li>
                </ul>
            </ul>
        </div><!-- Nav End -->
        <div id="login_signup"><!-- Login and Sign up buttons START -->
        <ul>
            <li><a href="#">Sign Up</a></li><li id="loginnow">
            <a href="#">Log In</a></li>
    </div><!-- Login and Sign up button END -->
<div id="panel">
    <input type="text" name="firstname" class="loginputs" placeholder="Username">
        <br>
            <br>
    <input type="password" name="pwd" class="loginputs" placeholder="Password">
        <br>
            <br>
    <input type="submit" value="Submit" class="loginputs">
</div>

</div>

JQuery:

    $(document).ready(function(){
  $("#loginnow").click(function(){
    $("#panel").slideToggle("slow");
  });
});

CSS:

    /* Navigation Menu */
.site_header {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    /* Adds shadow to the bottom of the bar */
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
    /* Adds the transparent background */
    background-color: blue;
    font-family: sans-serif;
    display: inline;
}
#nav {
    margin-left: 110px;
    background-color: blue;
    width: 50%;
    display: inline-block;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size:20px;
}
#nav ul li {
    display: inline-block;
}
#nav ul li:hover {
    background-color: #8D9FD0;
}
#nav ul li a, visited {
    display: block;
    padding: 13px;
    color: #FFF;
    text-decoration: none;
}
#nav ul li a:hover {
    color: #444;
}
#nav > ul li:hover a {
    color: #FFF;
} 

/* Drop Down Menu */

#nav ul li:hover > ul {
    display: block;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color:#FFF;
    opacity: 0.6;
    filter: alpha(opacity=60);
    min-width: 225px;
}
#nav ul ul li {
    display: block;
}
#nav ul li:hover ul li a,visited {
    color: blue;
}
#nav ul ul li:hover {
    background-color: #F9F9F9;
}

#nav ul ul li:hover > ul {
    display: block;
}
#nav ul ul ul {
    margin: -52px 0 0 225px;
    background-color: #F9F9F9;
}
#nav ul ul ul li a:hover {
    color: #444;  
}
/* Log in and Sign Up */
#login_signup {
    background-color: blue;
    width: 15%;
    display: inline-block;
    float: right;
    margin-right: 10%;
}
#login_signup ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size:20px;
}
#login_signup ul li {
    display: inline-block;
}
#login_signup ul li:hover {
    background-color: #8D9FD0;
}
#login_signup ul li a, visited {
    display: block;
    padding: 13px;
    color: #FFF;
    text-decoration: none;
}
#login_signup ul li a:hover {
    color: #444;
}
#login_signup > ul li:hover a {}
h3 {
    text-align: center;
    color: #FFF;
}
.text a:link {
    color: #FFF;
    font-family: sans-serif;
    text-decoration: none;
}
/* JQuery */
#panel {
    padding-top: 15px;
    padding-bottom: 20px;
    text-align:center;
    background-color:#CCC;
    border:solid 1px #000;
    margin-top: 50px;
    z-index: -1;
}
#flip {
    padding: 5px;
    text-align: center;
    background-color: #CCC;
    border: 1px solid black;
    z-index: -1;
}
#panel
{
    float: right;
    width: 15%;
    display:none;
    margin-right: -190px;
    z-index: -1;
}

最终结果： http://jsfiddle.net/StacksOnStacksOverHoes/4uhKN/embedded/result/

截至目前，点击“

”（列表项）。表单出现并停在我想要的位置。（问题）是表格在视觉上似乎从屏幕顶部开始，而不是导航栏的底部。

Answer 1

这是因为jQuery从margin-top开始动画：0;

我认为你需要使用position：absolute来避免错误的动画。

以下是示例：http://jsfiddle.net/4uhKN/13/embedded/result/

这是我的修复：

#panel {
padding-top: 15px;
padding-bottom: 20px;
text-align: center;
background-color: #CCC;
border: solid 1px #000;
width: 15%;
right: 190px;
top: 50px;
display: none;
z-index: -1;
position:absolute;
}

顺便说一句，您将不得不使用媒体屏幕等，因为此修复程序可能会破坏网站的移动版本。

如何更改“.slideToggle”JQuery效果的原点？

1 个答案: