jQuery的悬停LI> UL - 保持可见，直到拔下鼠标从子UL

Question

代码：

 $("ul.menu_body li:even").addClass("alt"); 
     $('li a.menu_head').hover(function() { 
      $('ul.menu_body').slideToggle('medium'); 
     }, 
      function(){ 
     $('ul.menu_body').slideToggle('medium'); 
      }); 

在网上找到了这段代码的某处

，原来这是对“李a.menu_head”点击事件来显示和隐藏“ul.menu_body”。

点击正常工作。我更喜欢悬停效果。

不幸的是，当您将鼠标移出原始LI时，我的代码立即隐藏了UL。我怎么能调整这个，使“ul.menu_body”保持可见，直到鼠标离开UL，而不是“li a.menu_head”。

谢谢。

我的HTML更

<li> <a href="#" class="menu_head"></a> 
     <ul class="menu_body"> 
     <li>content</li> 
     <li>content</li> 
     </ul> 
    </li> 

Answer 1

您可以尝试

$('li a.menu_head').mouseenter(function() { 
     $('ul.menu_body').slideDown('medium'); 
    }); 
    $('ul.main_UL_class_here').mouseleave(function(){ 
    $('ul.menu_body').slideUp('medium'); 
     }); 

Answer 2

$('li a.menu_head').hover(function() { 
     $('ul.menu_body').show() 
    }); 

    $('ul.menu_body').hover(function() { 

    }, 
    function(){ 
     $('ul.menu_body').hide(); 
    }); 

有点试验和错误，似乎做it..not知道，如果有一个“空白”的功能是正确的寿。

Answer 3

问题是你正在使用悬停，试试这样

$(document).ready(function() { 
    $("ul.menu_body li:even").addClass("alt"); 
    $('ul.menu_body').slideToggle('medium'); 

    $('li a.menu_head').bind('mouseenter', function() { 
     $('ul.menu_body').slideDown('medium'); 
    }); 
    $('.menu_body').bind('mouseleave', function(){ 
     $('ul.menu_body').slideUp('medium'); 
    }); 
});