离开祖父母div时的鼠标箭头触发

Question

当鼠标离开祖父母div时触发fadeOut的下拉菜单有点麻烦，我将这个问题搜索到死亡，还没有找到一个优雅的解决方案。这里是我的代码：link

var main = function() { 
    $('nav').mouseenter(function() { 
     $('ul li ul').fadeIn('400'); 
    }); 

    $('nav ul li').mouseleave(function(){ 
     $('ul li ul').fadeOut('400'); 
    }); 
} 

$(document).ready(main); 

Answer 1

FIDDLE

$(this).find('ul').fadeOut('400'); 

是正确的，因为$('ul>li>ul').fadeOut('400');无法针对具体的（current）里。

使用下列标记的分层流量

var main = function() { 
     $('nav').mouseenter(function() { 
      $('ul li ul').fadeIn('400'); 
     }); 

     $('nav ul li').mouseleave(function() { 
      $(this).find('ul').fadeOut('400'); 
     }); 
    }; 

Answer 2

DEMO：MY FIDDLE

你需要指定哪些元素（）你试图附加的事件。通过添加'>'你强制只将该事件附加到该元素的子元素。试试这个：

var main = function() { 
     $('nav').mouseenter(function() { 
      $(this).find('ul').fadeIn('400'); 
     }); 

     $('nav>ul>li').mouseleave(function() { 
      $(this).find('ul').fadeOut('400'); 
     }); 
    };