javascript - 菜单 : On hover toggle div slide from top

Question

我正在制作一个下拉菜单，该菜单在悬停 .account-nav-show 时打开。我已经完成了向下滑动功能，但是当您从 .account-nav-show 中删除箭头时，它不会再向上滑动。另外，我要做的是让它保持打开状态，直到您将箭头向下移动到实际的#account-nav 中。有什么想法吗？

此外，.account-nav-show 所在的 div 有一个 :hover，因此当您悬停 .account-nav-show 时它会改变颜色。当您将箭头向下滑动到#account-nav 时，是否可以将其保持在 :hover？

      <script type="text/javascript">

$(document).ready(function(){

        $("#account-nav").hide();
        $(".account-nav-show").show();

    $('.account-nav-show').hover(function(){
    $("#account-nav").slideDown(400);
    });

});

</script>
<a class="account-nav-show">Account</a> 
<div id="account-nav">
<a href="/account">Account</a><br>
{{ 'Log out' | customer_logout_link }} 
</div>

Answer 1

悬停绑定(bind)后添加:

$('.account-nav-show').on('mouseleave', function(){
    $("#account-nav").slideUp(400);
});

这是您需要的最终代码:

<script type="text/javascript">
    $(document).ready(function(){
        $("#account-nav").hide();
        $(".account-nav-show").show();

        $('.account').hover(function(){
            $("#account-nav").slideDown(400);
        });

        $('.account').on('mouseleave', function(){
            $("#account-nav").slideUp(400);
        });
    });
</script>

<div class="account">
    <a href="#" class="account-nav-show">Account</a> 
    <div id="account-nav">
        <a href="/account">Account</a><br>
        {{ 'Log out' | customer_logout_link }} 
    </div>
</div>

有 JSFiddle 示例:http://jsfiddle.net/odorcxeu/