基本下拉菜單（jQuery的）

Question

我使用這個目前：

$(document).ready(function() { 
    $('ul#nav > li').hover(function() { 
     $('ul:first', this).show(); 
    }, 
    function() { 
     $('ul:first', this).hide(); 
    }); 
    $('ul#nav li li').hover(function() { 
     $('ul:first', this).each(function() { 
      $(this).css('top', $(this).parent().position().top); 
      $(this).css('left', $(this).parent().position().left + $(this).parent().width()); 
      $(this).show(); 
     }); 
    }, 
    function() { 
     $('ul:first', this).hide(); 
    }); 
}); 

..can它可以改善/壓實進一步？

謝謝。

Answer 1

你可以存儲$(this).parent變量和連鎖功能，除此之外，它看起來非常簡單（我寫假名單行功能在一條線上）

$(document).ready(function() { 
    $('ul#nav > li').hover(function() { $('ul:first', this).show(); }, 
          function() { $('ul:first', this).hide(); } 
    ); 
    $('ul#nav li li').hover(function() { 
     $('ul:first', this).each(function() { 
      var p = $(this).parent(); 
      $(this).css('top', p.position().top) 
        .css('left', p.position().left + p.width()) 
        .show(); 
     });}, 
     function() { $('ul:first', this).hide(); } 
    ); 
}); 

Answer 2

我肯定會取代：

$(this).css('top', $(this).parent().position().top); 
$(this).css('left', $(this).parent().position().left + $(this).parent().width()); 
$(this).show(); 

有：

var element = $(this); 
var parent = element.parent(); 
var position = parent.position(); 
element.css('top', position.top); 
element.css('left', position.left + parent.width()); 
element.show();