如何让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类时打开

回答

相关问题