基本下拉菜单（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();