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>

Jquery菜单没有隐藏在鼠标上

2 个答案: