JQuery работает нормально ... но может быть лучше

Question

вот мое рабочее выпадающее меню ...

http://jsfiddle.net/NAyWQ/7/

это делает работу, и это в значительной степени вся функциональность, в которой я на данный момент нуждаюсь ... однако я чувствую, что это может быть немного оптимизировано. а именно, есть ли способ сделать это без границы div? Кроме того, выпадающий список снова запускается, если я возвращаюсь в меню, не так уж и много, но было бы неплохо предотвратить такое поведение.

Любые предложения / изменения будут с благодарностью.

Answer 1

Отработав пример @ AndrewMilson, вы можете сделать это:

$("#press, #contact, #about").hover(function(){
    $("#dd_" + this.id).slideDown("fast");
}, function(){
    $("#dd_" + this.id).slideUp("fast");
});

Вот оно у вас на скрипке: http://jsfiddle.net/NAyWQ/11/

Answer 2

jsfiddle у вас немного грязный и не очень расширяемый. Я бы предложил использовать «ul» вместо «div», потому что он чище, и вы можете делать больше вещей с помощью CSS. Кроме того, я бы воздержался от использования слишком большого количества идентификаторов, так как это означает, что вы всегда должны обновлять их вручную.

Вот пример, который я собрал. Этот метод также поддерживает вложенные выпадающие списки (если вы их хотели).

http://jsfiddle.net/EYv9g/4/

Вы увидите «>» в ​​CSS. Это действительно мощный селектор, который позволяет применять стили к элементу, являющемуся прямым потомком родителя, но не к элементам, расположенным ниже

Например:

ul.menu > li {background: yellow}

будет применяться к ...

<ul class="menu">
    <li>me
        <ul>
            <li>but NOT me</li>
        </ul>
    <li><a>me</a>
<ul>

Answer 3

попробуйте что-то вроде этого - http://jsfiddle.net/NAyWQ/11/.

вот jquery он не использует границы div.

$("#press, #contact, #about").hover(function(){
    $("#dd_" + this.id).slideDown("fast");
}, function(){
    $("#dd_" + this.id).slideUp("fast");
});