li 클래스에서 마우스를 가져 가면 jquery 드롭 다운 메뉴가 열린 상태로 유지하는 방법

메뉴 클래스 ul 클래스는 li 클래스를 가리키면 드롭 내용을 열도록 전체 너비를 늘립니다. 마우스가 여전히 "ul"에있을 때 마지막 li의 열린 내용을 계속 열어두고, 마우스가 메뉴에서 완전히 벗어날 때만 내용을 숨기고 싶습니다. jsFiddle 설정, 파란색 bg 필드는 마우스가 아직있을 때 마지막 내용을 열어두고 싶습니다. li 클래스에서 마우스를 가져 가면 jquery 드롭 다운 메뉴가 열린 상태로 유지하는 방법

http://jsfiddle.net/R7aTq/150/

(function($){ 

    $.fn.naviDropDown = function(options) { 

    //set up default options 
    var defaults = { 
     dropDownClass: 'dropdown', //the class name for your drop down 
     dropDownWidth: 'auto', //the default width of drop down elements 
     slideDownEasing: 'easeInOutCirc', //easing method for slideDown 
     slideUpEasing: 'easeInOutCirc', //easing method for slideUp 
     slideDownDuration: 500, //easing duration for slideDown 
     slideUpDuration: 500, //easing duration for slideUp 
     orientation: 'horizontal' //orientation - either 'horizontal' or 'vertical' 
    }; 

    var opts = $.extend({}, defaults, options);  

    return this.each(function() { 
     var $this = $(this); 
     $this.find('.'+opts.dropDownClass).css('width', opts.dropDownWidth).css('display', 'none'); 

     var buttonWidth = $this.find('.'+opts.dropDownClass).parent().width() + 'px'; 
     var buttonHeight = $this.find('.'+opts.dropDownClass).parent().height() + 'px'; 
     if(opts.orientation == 'horizontal') { 
     $this.find('.'+opts.dropDownClass).css('left', '0px').css('top', buttonHeight); 
     } 
     if(opts.orientation == 'vertical') { 
     $this.find('.'+opts.dropDownClass).css('left', buttonWidth).css('top', '0px'); 
     } 

     $this.find('li').hoverIntent(getDropDown, hideDropDown); 
    }); 

    function getDropDown(){ 
     activeNav = $(this); 
     showDropDown(); 
    } 

    function showDropDown(){ 
     activeNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing}); 
    } 

    function hideDropDown(){ 
     activeNav.find('.'+opts.dropDownClass).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown 
    } 

    }; 
})(jQuery);

출처

2013-03-30 Mike Shackelford

할 수는 있지만 사소한 것이 아니며 그러한 현지화 된 상황에 대한 도움말 포럼에서 발생할 가능성은 거의 없습니다. hoverintent를 제거하고 개별 마우스 이벤트 및 타이머를 다시 작성하고 브라우저 간 호환이 가능하도록해야합니다. 누군가에게 시달림을 주겠다고 – charlietfl

뿐만 아니라 ul에 별도의 hoverIntent() 체크를 가진보십시오. 이렇게하면 li에서 드롭 다운의 활성화를 제어하고 ul에서 비활성화를 제어 할 수 있습니다. 활성 탐색 항목을 추적하려면 적절하게 범위가 지정된 변수가 있어야합니다.

여기에 업데이트 된 jsFiddle입니다 :

http://jsfiddle.net/R7aTq/170/ 내가 JS 섹션에 플러그인 코드를 이동했다. 새 hoverIntent() 호출을 추가하고 새 드롭 다운 메뉴가 열리면 기존 드롭 다운을 닫는 처리를 위해 드롭 다운 기능을 업데이트 한 것을 볼 수 있습니다. 그게 효과가 있는지보십시오.

출처

2013-03-30 23:52:49

Jon, 저에게 완벽하게 작동합니다. 내가 가진 유일한 질문은 초기 li 놓기 컨텐츠를 열 때, 그 중 하나가 될 수있는 것, 다음 li을 가져 가면 컨텐츠가 들어 가지 않는다는 것, 가능하면 컨텐츠 상자가 새로운 것에 드롭 다운 될 가능성이 있습니다. 리의 내용이 열렸습니까? 나는 드롭 내용을 전체 너비로 가져갈 계획이었고 드롭 내용의 위아래 accordian은 지옥처럼 짜증났다. 따라서 하나를 열어 놓고 다른 Li를 가져 가면 이전 버전을 닫고 새 버전을 여는 대신 새로운 콘텐츠를 채우십시오. 도와 주셔서 감사합니다 –

li 클래스에서 마우스를 가져 가면 jquery 드롭 다운 메뉴가 열린 상태로 유지하는 방법

답변

관련 문제