菜單：在懸停切換從頂部的div滑塊

Question

我正在製作一個滑動下拉菜單，在懸停.account-nav-show時打開。我已經完成了向下滑動功能，但當您從.account-nav-show中移除箭頭時，它不會滑回。另外，我試圖做的是讓它保持打開狀態，直到您將箭頭放到實際的＃account-nav中。有任何想法嗎？

此外，.account-nav-show所在的div具有：懸停，因此當您懸停.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/