마지막으로 내린 메뉴 항목이 열린 상태로 유지

마우스 커서를 올리면 하위 메뉴에 .stick을 추가하고 마우스를 놓으면 제거하는 메뉴가 나타납니다. 다른 메뉴 항목에 마우스를 올려 놓지 않으면 마지막 숨겨진 메뉴 항목을 숨기기 전에 다른 2 초 동안 열어두기를 원합니다.마지막으로 내린 메뉴 항목이 열린 상태로 유지

다음은 내가 가지고있는 것입니다. 컨테이너의 mouseleave()은 ul#main-nav > li 호버링 기능의 handlerOut 내에 있기 때문에 작동하지 않는다는 것을 알고 있지만, 내가 마지막으로 중단 한 부분을 보여주기 위해 남겨 두었습니다. 사전에

$('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 예제] (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 > ul.submenu.stick { 
    display: block; 
}

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

이가 수정해야 :

첫째, 당신의 CSS는 다음과 같은 규칙을했다 .

언급 한대로 스크립트 코드에서 .hover() 및 .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);    
    });

바이올린 : http://jsfiddle.net/3F7bJ/3/

출처

2013-08-01 05:05:54

마지막으로 내린 메뉴 항목이 열린 상태로 유지

답변

관련 문제