Как исправить это выпадающее меню JQuery?

Я попытался создать выпадающее меню в JQuery, но это оказалось довольно сложно.

Мой код здесь:

  $(document).ready(function(){

        $('ul li').mouseover(function()
        {
              $(this).children("ul").show();
        });
        $('ul li ul').mouseover(function()
        {
              $('ul li ul').show();
        }).mouseout(function(){
              $('ul li ul').hide();
        });

  });

По сути, я хочу навести курсор на элемент списка, а подпункт выпадающего списка, затем я могу навести курсор на элементы списка, и если мышь отключается от вспомогательной навигации, меню снова скрывается.

спасибо, Кит

ОБНОВЛЕНИЕ: я удалил границу из CSS, и она работает нормально, поэтому кажется, что отключение мыши срабатывает, когда я нахожусь над границей в 1 пиксель, что довольно странно.


javascript menu drop-down-menu jquery
person Keith Donegan    schedule 02.04.2009    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Знаете ли вы о superfish? Это плагин меню jQuery с отличной кросс-браузерной поддержкой. Это определенно не проблема, с которой вы столкнулись. Я не проверял исходный код, но ключевое отличие состоит в том, что он добавляет задержку при отключении мыши. Это означает, что действие не запускается, если положение курсора не является постоянным в течение некоторого времени (задержка по умолчанию составляет 800 мс). Это решит вашу проблему, а также будет полезно реализовать, так как это сделает ваше меню более удобным для пользователя.

person kgiannakakis    schedule 08.04.2009
comment
Благодарю. кажется, все в порядке, хотя я все равно хотел бы полностью понять, как это сделать самому. - person Keith Donegan; 09.04.2009

arrow_upward
4
arrow_downward

вам следует использовать функцию jQuery hover(), поскольку она позволяет избежать всех проблем, характерных для браузера.

Без небольшого тестирования я бы предположил, что код будет выглядеть примерно так:

    $('.clearfix li').hover(function() {
          $('ul', this).show();
        }, function() {
          $('ul', this).hide();
        });
person Scott Evernden    schedule 02.04.2009
comment
спасибо Скотт. К сожалению, такая же проблема. В IE не работает - person Keith Donegan; 02.04.2009
comment
да, я играл с этим, и это немного сложнее, чем я себе представлял. Буду ковырять, может что-то и придумаю :) - person Scott Evernden; 02.04.2009

arrow_upward
0
arrow_downward

Проблема в том, что граница находится «вне» коробки. Это помогает, если вы просто переместите раскрывающееся меню на 1 пиксель, чтобы оно перекрывало строку меню на этот 1 пиксель.

Просто измените верхнюю позицию выпадающего меню в вашем CSS с 30px на 29px следующим образом:

        ul li ul {
            border: none;
            position: absolute;
            top: 29px; /* <-- was 30px */
person Ridcully    schedule 08.04.2009

arrow_upward
0
arrow_downward

Он отлично работает на моей версии Firefox 1.5.0.1 Возможно, у вас не последняя версия. Я сам веду галерею изображений, но не думаю, что этот тип макета подойдет мне, так как у меня есть описания для моих изображений, а некоторые изображения довольно большие. Не знаю, может стоит поэкспериментировать.

person Community    schedule 17.04.2009