Drop Down Box продолжает мерцать - JQuery и CSS

Question

У меня трудности с чем-то действительно базовым. Я пытаюсь реализовать раскрывающийся список с 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'); });
 });

Answer 1

#header_wrapper имеет ширину, фиксированную в 950px, и #logo и #nav плавают в нем. * * * * * * * * * * * * * * * * * * * * * * *

* * * * * * * * * * * * * * Так как #nav (то есть элементы также всплывают).

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

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

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

Answer 2

Ну, я занимался этой проблемой в течение последних 15 минут и наконец нашел НАСТОЯЩЕЕ решение.

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

Ну, я понял, что использовал неправильное событие 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));
});

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