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

..可以进一步改进/压缩吗？

谢谢。

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