Drop Down Box Сохраняет мерцание – JQuery и CSS

У меня возникают трудности с чем-то действительно основным. Я пытаюсь реализовать раскрывающийся список с JQuery и CSS. Я не могу понять, почему мой падающий ящик продолжает мерцать, когда я нависаю над ссылкой «Продукты».

Вот демонстрация того, над чем я работаю. http://174.132.101.73/~ree/header/

Я был бы признателен за любую помощь в этом.

редактировать

Ну код можно найти, посмотрев исходный код ссылки, которую я дал. Основная часть, которая может вам понадобиться, которая отображает / скрывает раскрывающийся список, это, наряду с CSS:

$(document).ready(function(){ $('li.headlink').hover( function() { $('ul', this).css('display', 'block'); }, function() { $('ul', this).css('display', 'none'); }); }); 

#header_wrapper имеет ширину, установленную на уровне 950px, и в ней #logo и #nav . Поскольку #logo 250px, это оставляет 700px для того, что находится в #nav (элементы которого также перемещаются).

Все прекрасно подходит, пока подменю «Продукты» не станет видимым. Тогда его .headlink становится намного шире, из-за дополнительного контента, который подталкивает общий размер #nav туда, где он принудительно #nav к следующей «строке», ниже #logo . Это способ работы элементов с плавающей точкой; они заполняют пространство горизонтально до тех пор, пока какой-то блок не станет слишком большим и будет сдвинут ниже первого.

Мерцание возникает из-за того, что :hover больше не активен, а подменю скрывается. Затем все возвращается к тому, как это было. За исключением того, что указатель мыши все еще существует, и теперь :hover снова активен. Повторение.

Я не уверен, как бы это исправить, но мне кажется, что это не так. Возможно, вы можете изменить способ вложенности ваших элементов или не плавать раздел навигации. Для быстрого исправления вы можете изменить ширину #header_wrapper на нечто большее, например 1450px, просто чтобы увидеть, как работает подменю «Продукты», и выработайте его изломы.

Ну, я занимаюсь этой проблемой в течение последних 15 минут и, наконец, нашел решение ACTUAL.

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

Ну, я понял, что использовал неправильное событие JQuery. Не используйте событие jQuery HOVER , вместо этого используйте событие jQuery mouseover событие mouseout . Это решит проблемы, связанные с HOVER .

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

Если вы используете таймаут с зависанием, и вы все еще мерцаете, обязательно используйте событие mouseover .

 $(".btn").mouseover(function() { clearTimeout(this.timeout); $(this).addClass("hover"); /* can add class, or manually set menu visible, i prefer using CSS class */ }).mouseout(function() { clearTimeout(this.timeout); /* clear timeout in case 2 mouseout events fire at same time */ this.timeout = setTimeout($.proxy(function() { $(this).removeClass("hover"); }, 300)); }); 

Этот код должен быть повторно использован для всех выпадающих списков на вашей странице.