Блог

Главная - Вопросы по программированию - проблема при наведении на выпадающий список (jQuery)

проблема при наведении на выпадающий список (jQuery)

#jquery #html #hover #drop-down-menu

#jquery #HTML #наведите #выпадающее меню

Вопрос:

Я создал простое выпадающее меню, это работает нормально, но я хочу добавить некоторое пространство между кнопкой и выпадающим меню (между нижней кнопкой / ссылкой и верхним выпадающим меню).

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

Я могу сделать li выше при наведении, но к li привязан стиль, поэтому я ничего не могу с этим поделать (также к элементам a привязан фиксированный стиль).

Итак, как я могу сохранить выпадающее меню, если между ним есть пробел, если я наведу курсор на его родительский элемент li?

Код jQuery

     $('#sub-menu li').hover(function(){
        $(this).children('ul').stop(true,true).fadeIn(100);
    },function(){
        $(this).children('ul').stop(true,true).fadeOut(100);
    });

Базовый HTML-код

 <div>
    <ul>
        <li><a href="#">link</a>
            <ul>
                <li>dropdown menu</li>
                <li>dropdown menu</li>
                <li>dropdown menu</li>
            </ul>
        </li>
    </ul>
</div>

Комментарии:

1. Можете ли вы включить свой css и что вы делаете, чтобы добавить пробел (поля, отступы, абсолютное положение и т.д.)?

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

3. где находится кнопка и кому вы ее назначаете id="sub-menu" ; ul или div

Ответ №1:

Типичный способ сделать это — настроить таймер для закрытия подменю при событии mouseleave родительского элемента, но отменить таймер при наведении курсора мыши на подменю. Установка этого таймера на 150-250 мс обычно дает достаточно времени для умеренно медленного перемещения мыши, чтобы сохранить заданное поведение, но не ощущается слишком большой задержки, когда меню предназначено для закрытия.

Не тестировался, больше похоже на псевдокод, просто чтобы показать общий подход:

 var submenuTimer = null;

$('#sub-menu li')
   .mouseenter(function(){
      $(this).children('ul').stop(true,true).fadeIn(100);
   })
   .mouseleave(function{
      submenuTimer = 
       setTimeout(
        function(){ $(this).children('ul').stop(true,true).fadeOut(100) }, 200
       );
   }); 

$('#sub-menu li ul').mouseenter(function(){ clearTimeout(submenuTimer });

Ответ №2:

Я думаю, что понимаю, хотя css был бы здесь очень полезен. Я полагаю, что у вашего дочернего элемента ul есть position:abosolute , а у вас есть hover на родительском li . Когда они находятся вместе, вы можете перемещать мышь с одного на другой, не покидая li , но как только вы помещаете пробел между ними, перемещение мыши со ссылки на ul меню оставляет родительское, li вызывая mouseleave срабатывание.

Вероятно, я бы справился с этим следующим образом. Вместо изменения положения дочернего элемента ul , оберните это ul в div. Поместите padding-top в div столько места, сколько вы хотите. Затем переместите все элементы позиционирования css и jquery, чтобы вместо этого показывать / скрывать / позиционировать div. Таким образом, переход по ссылке в меню ul не приведет к попаданию в пустое пространство и скрытию, вместо этого он переместится в прозрачный div, который все еще является частью родительского, li и меню не будет скрыто.

Надеюсь, это поможет, опять же, css был бы полезен, чтобы точно видеть, что вы делаете.

РЕДАКТИРОВАТЬ: Создал скрипку для демонстрации идеи. Первая ссылка показывает проблему, вторая показывает исправление, с рамкой, чтобы показать, что на самом деле происходит, а третья — фактическое исправление.

http://jsfiddle.net/fTmLh/

Ответ №3:

Простой ответ заключается в том, чтобы просто увеличить нижнее заполнение в ваших <LI> тегах для ссылок верхнего уровня. создайте новый класс специально для них или добавьте его «на лету», вот так:

    <li style="padding-bottom: 8px;">