Сделать последнее зависшее меню остается открытым

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

Вот что у меня есть. Я знаю, что вызываемый в контейнере mouseleave() не будет работать, так как он находится внутри обработчика. Функция зависания ul#main-nav > li, но я оставил его, чтобы показать вам, где я последний раз остановился.

$('ul#main-nav > li').hover(function() { 
    var $this = $(this); 
    clearTimeout(window.menustick); 
    $this.find('ul.submenu').addClass('stick'); 
}, function() { 
    var $this = $(this); 
    if($this.siblings().hover()) { 
     $this.find('ul.submenu').removeClass('stick'); 
    } else if ($('#main-nav').mouseleave()) { 
     window.menustick = setTimeout(function(){ 
      $this.find('ul.submenu').removeClass('stick'); 
     }, 2000); 
    } 
});

Here's the jsFiddle.

Заранее спасибо!

источник

2013-07-31 Mikel

Пожалуйста предоставить [jsfiddle example] (http: //jsfiddle.n et) – Dom

Привет @Dom, [Вот скрипка JS.] (http://jsfiddle.net/mikemiketm09/3F7bJ/) Спасибо! – Mikel

Я обновил JS Fiddle, проверьте это http://jsfiddle.net/3F7bJ/1/ –

У вас было несколько проблем с вашими сценариями и CSS.

Во-первых, ваш CSS имел следующее правило:

nav ul#main-nav li:hover > ul.submenu { 
    display: block; 
}

Это должен быть изменен на:

nav ul#main-nav li > ul.submenu.stick { 
    display: block; 
}

Это означает, что ваш CSS контролировал видимость, а не на «палке» класса ,

Как вы упомянули, использование кода .hover() и .mouseleave() в коде скрипта неверно и не требуется. Как и в тот момент, вы уже находитесь в mouseleave (handlerOut) hover.

Ниже код появляется для выполнения желаемого эффекта вы искали:

var menuStickTimeoutId; 
$('ul#main-nav > li').hover(function() { 
    var $this = $(this); 
    clearTimeout(menuStickTimeoutId); 
    $('#main-nav ul.submenu').removeClass('stick'); 
    $this.find('ul.submenu').addClass('stick'); 
}, function() { 
    var $this = $(this); 
    clearTimeout(menuStickTimeoutId); 
    menuStickTimeoutId = setTimeout(function() { 
     $this.find('ul.submenu').removeClass('stick'); 
    }, 2000); 
});

Работа демо: http://jsfiddle.net/3F7bJ/2/

источник

2013-08-01 05:05:44 JonWarnerNet

JS:

$("ul#main-nav > li").hover(
    function(){ 
     $(this).children('ul').hide().fadeIn(500); 
    }, 
    function() { 
     $('ul.submenu', this).fadeOut(2000);    
    });

Fiddle: http://jsfiddle.net/3F7bJ/3/

источник

2013-08-01 05:05:54

Сделать последнее зависшее меню остается открытым

ответ

Смежные вопросы