javascript - Jquery菜单不隐藏在鼠标离开

Question

我有以下菜单（这只是一个需要显示下拉菜单的图标。我可以通过切换来显示和隐藏菜单，但是当我这样做时，只要我尝试移动到显示的链接它关闭,如果我通过添加类在悬停时触发它,我无法让菜单消失.有没有人有办法在鼠标悬停并单击时平滑地显示和隐藏此菜单？

   <div id="global_menu">
        <span id="show_global_menu" class="icons_large">(</span>
             <ul id="dropdown" class="hidden">
                 <span class="arrow-u" style="margin-top:-8px;"></span>
                 <li> @Ajax.ActionLink("Icon Legend", "font_legend", null, new AjaxOptions {           UpdateTargetId = "placeholder_extra1", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, new { @class = "" })</li>
                <li><a href="../Home/Index" title="Sign Out">Sign Out</a></li>
                <li>Support</li>
            </ul>
</div>
    <script>
       $(document).ready(function () {
           if ($("ul#dropdown").hasClass("hidden")) {
               $("span#show_global_menu").hover(function () {
                   $("ul#dropdown").slideDown("slow");
               });
           };
       $("ul#dropdown").hover(function(){
           $("ul#dropdown").mouseout(function () {
               $("ul#dropdown").addClass("hidden");
           });
       });
      });
 </script>      

Answer 1

用它：

<script>
   $(document).ready(function () {
       if ($("ul#dropdown").hasClass("hidden")) {
           $("span#show_global_menu").hover(function () {
               $("ul#dropdown").slideDown("slow");
           });
       };

       $("ul#dropdown").mouseleave(function () {
           $("ul#dropdown").slideUp('slow');
       });
  });
</script>   

Answer 2

试试这样：$(document).ready(function () {

$("span#show_global_menu").hover(function () {
     $("ul#dropdown").slideDown("slow");
},function(){
      $("ul#dropdown").slideUp("slow");
});


      });
 </script>