Question

我正在制作一个向下滑动菜单，该菜单在悬停.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>

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

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

1 个答案: