Question

我正在制作一个带有下拉登录框的网页当鼠标悬停在导航菜单中使用jquery悬停的列表项时，登录框应向下滑动。

登录表单隐藏在带有display：none的css中，直到登录链接被鼠标悬停。
我使用了slideToogle和css（{“display”：“block”}）来尝试这个我无法让它工作，认为它是一个任何和所有的帮助将是非常有用的。

以下是我页面中的例外情况：

$("#login").hover(function() {
	$("#login-form").slideToogle();
});

#login {
    list-style: none;
	height: 40px;
}

#login a {
    text-decoration: none;
    color: white;
    background-color: #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 10px 20px;
}

#login-form  {
    position: absolute;
    margin-top: 9px;
    display: none;
    float: left;
    clear: both;
    background-color: #666;
    padding: 0 2% 2% 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#login-form .text {
    width: 100%;
    float: right;
    margin-bottom: 2%;
}

#login-form .submit {
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
    <ul class="ext-nav">
        <li id="login">
            <a  href="#" margin-right="40px">login</a>
                <form id="login-form" action="script/login.php" method="post">
                    <p><input class="text" type="text" name="username" placeholder="username" /></p>
                    <p><input class="text" type="password" name="password" placeholder="password" /></p>
                    <p><input class="submit" type="submit" value="submit" /></p>
                </form>
        </li>
    </ul>
</nav>

Answer 1

您只是拼错了功能名称。它应该是slideToggle()而不是slideToogle()。

工作版本： http://jsfiddle.net/sajadtorkamani/2L37sn0t/

如何使用jquery悬停在鼠标上显示我的登录表单？

1 个答案: