Javascript 基本下拉菜单（jQuery）

我目前使用的是：

$(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();
    });
});

…是否可以进一步改进/压实

---

谢谢。

我一定会替换：

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

与：

您可以在变量和链函数中存储

$（this）.parent

，除此之外，它看起来非常简单（我在一行上编写匿名单行函数）

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();

$(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(); }
    );
});