выпадающий всплывающий вопрос (JQuery) - PullRequest
Новая
       26

выпадающий всплывающий вопрос (JQuery)

0 голосов
/ 24 мая 2011

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

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

Я могу сделать высоту при наведении курсора, но к ней прикреплен стиль, поэтому я не могу с этим многое сделать (также к элементам 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>

Ответы [ 3 ]

1 голос
/ 24 мая 2011

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

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

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

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

http://jsfiddle.net/fTmLh/

1 голос
/ 24 мая 2011

Типичный способ сделать это - установить таймер для закрытия подменю события родителя 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 });
0 голосов
/ 09 января 2013

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

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