子菜單不會在主菜單的mouseleave上滑動

Question

當我將鼠標移出子菜單時，它會向上滑動，但是如果從主菜單中將鼠標移出而不關注子菜單，則不會。 這裏是我的代碼

$('.dropdown').mouseenter(function() { 
    $('.sublinks').stop(false, true).hide(); 
    var submenu = $(this).parent().next(); 
    submenu.css({ 
     position: 'absolute', 
     top: $(this).offset().top + $(this).height() + 'px', 
     left: $(this).offset().left + 'px', 
     zIndex: 1 
    }); 
    submenu.stop(true, 
    true).slideDown(300); 
    submenu.mouseleave(function() { 
     $(this).slideUp(300); 
    }); 
}); 

---

HTML的

<ul id ="ul1" > 
     <li><a href="#" class="dropdown"></a></li> 

     <li class="sublinks"> 
      <table cellpadding ="0" cellspacing ="0"> 
      <tr> 
       <td><a href="Product1.aspx">Product 1 
       </a></td> 
      </tr> 
      <tr> 
       <td><a href="Product2.aspx">Product 2</a></td> 
      </tr> 
       <tr> 
       <td><a href="Product3.aspx">Product 3</a></td> 
      </tr> 
      <tr> 
       <td><a href="Product4.aspx">Product 4</a></td> 
      </tr> 
      <tr> 
       <td><a href="Product5.aspx">Product 5</a></td> 
      </tr> 
      <tr> 
       <td><a href="Product6.aspx">Product 6</a></td> 
      </tr> 


      </table> 
     </li> 

    </ul> 

Answer 1

因爲mouseleave勢必sublinks它不會工作。而且它不會發生，因爲鼠標永遠不會輸入sublinks。你可以用mouseleave來解決這個問題，這個問題綁定到sublinks和dropdown（如果是dropdown處理程序，你還需要檢查鼠標是否輸入sublinks）。但這不是最好的方法，就像我一樣。

假設將mouseleave和mouseenter都放在ul1上會更好。由於dropdown和sublinks都是ul1的子項，因此mouseleave事件將正常工作。