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

Question

Я пытался создать выпадающее меню в 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, и она работает нормально, поэтому кажется, что при наведении курсора на границу 1px курсор мыши срабатывает, что довольно странно.

Answer 1

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

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

    $('.clearfix li').hover(function() {
          $('ul', this).show();
        }, function() {
          $('ul', this).hide();
        });

Answer 2

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

Answer 3

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

Answer 4

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

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

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