菜单:悬停切换div从顶部滑动

时间:2014-10-11 12:08:15

标签: javascript jquery html css

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

此外,.account-nav-show所在的div具有:hover,因此当您将鼠标悬停在.account-nav-show时它会改变颜色。是否可以将其保持在:将箭头向下滑入#account-nav时将鼠标悬停?

      <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>

1 个答案:

答案 0 :(得分:1)

悬停绑定后添加:

$('.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/