離開祖父母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'); 
     }); 
    };