Основное раскрывающееся меню (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();