如何讓jquery下拉菜單在懸停li類時打開

菜單ul類將頂部展開全寬，當懸停li類時它會觸發拖放內容打開。當鼠標仍然處於「ul」狀態時，我希望保持最後一次打開的內容不變，並且只有當鼠標完全離開菜單時纔會隱藏內容。 jsFiddle設置，blue bg字段是「ul」類，我希望當鼠標仍然存在時，最後一個內容保持打開狀態。如何讓jquery下拉菜單在懸停li類時打開

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

喬恩，那對我來說是完美的。我唯一的問題是，當你打開最初的內容放置內容（可能是哪一個），然後你盤旋下一個內容時，內容不會縮回，而內容框會自動調整爲新的李的內容打開了？我打算讓drop content成爲全角，而dropcontent的up and down accordian很煩人。所以如果你有一個開放的，並懸停另一個李，而不是關閉舊的，並打開新的，只是有新的內容填充？謝謝您的幫助 –

如何讓jquery下拉菜單在懸停li類時打開

回答

相關問題