Меню навигации JQuery не работает по назначению

Question

Я создал довольно традиционное 3-горизонтальное раскрывающееся меню навигации с JQuery. Однако, вместо того, чтобы третий уровень смещен в сторону второго уровня, он открывает стиль аккордеона. Закрытие третьего уровня задерживается после выключения мыши, чтобы остановить его слишком много.

У меня есть только один вопрос, который еще предстоит решить. Когда кто-то открыл третий уровень, а затем возвращается к другой кнопке первого уровня, а затем возвращается к исходной кнопке первого уровня, третий уровень остается открытым.

Вы можете увидеть это в http://jsfiddle.net/BHK3C/6. Наведите указатель мыши на Испанию, а затем на Андалусию откроется третий уровень (Кордова и т. Д.). Если вы затем отправитесь в Марокко и быстро вернетесь в Испанию, сразу откроется третий уровень.

Я пробовал различные вещи, как

$(".nav1").hoverIntent( 
     function(){//onmouseover 
      $(this).children("ul").slideDown(1000); 
      $(".nav2").children("ul").hide(); 
     }, 

, но ни один из них не работает. Какие-либо предложения?

РЕШЕНИЕ Впоследствии я обнаружил, что существует вариация на моих первоначальных усилий, которые сделали работу:

$(".nav1").hoverIntent( 
     function(){//onmouseover 
      $(".nav2").children("ul").hide(); 
      $(this).children("ul").slideDown(1000); 
     }, 

.delay (3000) необходимо, чтобы остановить закрытие третьего уровня, как только мышь перемещается в другое место в списке уровня 2. На самом деле я нашел .delay (8000), похоже, о правильной настройке.

hoverIntent действительно полезен для остановки выпадающего меню из-за нежелательного движения. Пока я использую настройки по умолчанию, но я думаю, что он нуждается в небольшой настройке. Кажется, что во второй раз вы возвращаетесь в одно и то же место в списке уровня 2, поэтому уровень 3 довольно неохотно открывается.

Спасибо тем, кто ответил.

Answer 1

Ваша первая проблема - всего лишь один из CSS. В вашем скрипте есть несколько вложенных утверждений, которые могут быть причиной проблемы.

Ваша вторая проблема, вероятно, связана с тем, что вы неправильно обработали событие handlerOut.

http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

изменения кода к этому:

$(".nav1").hover( 
    function(){//onmouseover 
     $(this).children("ul").slideDown(1000); 
    }, 
    function(){//onmouseout 
     $(this).children("ul").slideUp(1000).children("ul").hide(); 
}); 

скрывает детей с 2-го уровня элемента, который был скользил вверх.

http://jsfiddle.net/BHK3C/7/

Answer 3

Не уверен, что это то, что вы хотите, но попробуйте удалить .delay(3000) когда вы MouseOut ul из .nav2

Кроме того, использовать JQuery stop() до конца текущей анимации перед началом нового один.

$(this).children("ul").stop(true, true).slideDown(1000); 

Updated Fiddle