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'); 
    }); 
});