子菜单不会在主菜单的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事件将正常工作。