Предотвращение скольжения подменю вниз при наведении курсора на подменю

У меня есть следующий скрипт, который обрабатывает скольжение вниз по подменю:

$('#nav li #bottom').hover(function() {
    $(this).closest('#nav li').find('#sub_nav').slideDown("slow");
},
function() {
    $(this).closest('#nav li').find('#sub_nav').slideUp("slow");
});

Сценарий написан таким образом, что прокрутка срабатывает только тогда, когда пользователь наводит курсор на один из элементов div в элементах списка навигации, то есть на #bottom.

Проблема, с которой я столкнулся, заключается в том, что, хотя слайд вниз работает нормально, меню скользит вверх, когда пользователь наводит курсор на подменю, и, конечно, я не хочу, чтобы подменю скользило вверх, пока мышь/курсор не покинет #nav li #bottom или #sub_nav.

Я создал jsfiddle здесь, чтобы вы могли увидеть меню в действии.

СКРИНШОТ СТРУКТУРЫ НАВИГАЦИОННОГО ЭЛЕМЕНТА

введите здесь описание изображения


navigation jquery slidedown slideup
person Nick    schedule 14.07.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

вы можете обернуть #sub_nav на div#wrapper, таким образом, sub_menu будет частью дна:

<div id="bottom">
    <a href="#">Menu Item 1</a>
    <ul id="sub_nav">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
</div>

также вы можете использовать метод stop():

$('#nav li #bottom').hover(function() {
    $(this).find('#sub_nav').stop().slideDown("slow");
},
function() {
    $(this).find('#sub_nav').stop().slideUp("slow");
});

ДЕМО

person undefined    schedule 14.07.2012
comment
Спасибо, это ответ на мой вопрос, поэтому я, конечно, отмечу его как таковой. К сожалению, я забыл важную информацию. Сайт, на котором я хотел бы использовать скрипт, — это сайт Wordpress, и я не знаю, как настроить тему так, чтобы подменю ul создавалось внутри блока #bottom. Следовательно, я использую .closest('nav li') в приведенном выше сценарии. Есть ли способ адаптировать скрипт для работы с ul, который находится за пределами #bottom div? Я включил скриншот структуры элемента навигации, сгенерированного в конце моего исходного ответа. - person Nick; 14.07.2012
comment
@Nick Добро пожаловать, вы можете попробовать этот скрипт, основанный на оригинальной структуре html jsfiddle.net/uVbJp/ 4 - person undefined; 14.07.2012
comment
Еще раз спасибо. Я реализовал ваше предложение, но все еще не работает, как я надеялся. Вы можете увидеть страницу, над которой я пытаюсь заставить работать здесь. Второй элемент навигации «Новости» имеет подменю, и я включил ваш скрипт (исправленный для правильных классов) в other.js (строки 73-85). Как вы можете видеть, подменю все еще появляется, когда пользователь наводит курсор на .top_nav, а также, когда курсор перемещается из div подменю, скрипт больше не работает. Не могли бы вы взглянуть на это? - person Nick; 14.07.2012
comment
Я пометил вопрос как ответ, так как он отвечает на исходный вопрос. Если у вас есть какие-либо идеи о том, как заставить это работать с моей конкретной разметкой, я был бы рад услышать об этом. Если что-то еще узнаю, отчитаюсь - person Nick; 14.07.2012