JQuery выпадающее меню прокручивается назад, когда наведите курсор мыши на выпадающие ссылки, кроме первой

Question

У меня есть меню jQuery, над которым я работаю на основе на многоуровневом раскрывающемся меню CSS Stu Nicholls .

Я работаю над добавлением анимированного эффекта слайда внизУ меня возникла странная проблема.

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

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

Вот тестовая страница, над которой я работаю

Любая помощь по этому вопросу будет отличной!

Answer 1

Ваша проблема, кажется, здесь

$('#nav ul li').hover(

  //Opens drop down
  function () { 
    $(this).addClass('active');
    $("#nav ul li.active ul").slideDown(200);
  },

  //Closes drop down
  function () {
    $("#nav ul li.active ul").slideUp(100);
    $(this).removeClass('active');

  }
);

Поскольку вы привязываетесь к селектору $('#nav ul li'), и каждый элемент навигации является отдельным LI, при переходе от одного LI к другому происходит наведение мыши и наведение мыши. Я предполагаю, что spazzing происходит, потому что элементы "перемещаются" в течение этого времени, вызывая повторные события мыши / происходящие.

Возможно, вы захотите попробовать привязку к другому элементу, например к UL.