多級菜單不顯示

Question

我在這裏有這個例子http://jsfiddle.net/65R8q/2/爲多級子菜單，但它沒有顯示，因爲使用stop（）使第一個子菜單穩定如何解決這個問題？

$(document).ready(function() { 
    $(".cat").mouseover(function() { 
     $(".sub1").slideDown(500, function() { 
      $(this).css("display", "block"); 
     }); 
    }); 

    $(".cat").mouseout(function() { 
     $(".sub1").slideUp(500, function() { 
      $(this).css("display", "none"); 
     }); 
    }); 

    $(".sub1").mouseover(function() { 
     $(this).css("display", "block").stop(); 
    }); 

    $(".sub1").mouseout(function() { 
     $(this).slideUp(500, function() { 
      $(this).css("display", "none"); 
     }); 
    }); 

    $(".item2").mouseover(function() { 
     $(".sub2").slideDown(500, function() { 
      $(this).css("display", "block"); 
     }); 
    }); 
}); 

Answer 1

我已經清除了很多css錯誤和大量的jQuery衝突。最後，我設法把這件事情做好。

Here is jsFiddle.

首先你不需要使用的，因爲這些方法全自動hides/shows $(this)元素之後完成slideUp/slideDown後操縱CSS display: block/none回調函數的。

第二個：您應該選擇用於觸發nav的包裝元素。在你的例子中，你選擇小元素.cat，這是錯誤的。你應該選擇包裹整個導航的最大ele。在您的例子：.menu

第三：不要忘記時使用position protert定義top:0; left:0;。如果您未定義頂部/左側值，則會在某些瀏覽器上產生衝突。

$(document).ready(function(){ 
    $('.menu').bind({ 
     mouseenter: function() { 
      $(".sub1").stop(true,false).slideDown(500); 
     }, 
     mouseleave: function() { 
      $(".sub1").slideUp(500); 
     } 
    }); 

    $('.item2').bind({ 
     mouseenter: function() { 
      $(".sub2").stop(true,false).slideDown(500); 
     }, 
     mouseleave: function() { 
      $(".sub2").slideUp(500); 
     } 
    }); 
});