jquery - 悬停在 li 类上时如何保持 jquery 下拉菜单打开

Question

菜单 ul 类将在顶部拉伸(stretch)全宽，当悬停 li 类时，它会触发下拉内容打开。当您的鼠标仍在 "ul"中时，我想保持最后 li 悬停的内容打开，并且只有当您的鼠标完全离开菜单时才隐藏内容。 jsFiddle 设置，蓝色 bg 字段是“ul”类我希望当您的鼠标仍然存在时，最后的内容保持打开状态。

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);

Answer 1

尝试对 ul 进行单独的 hoverIntent() 检查。这样您就可以控制 li 下拉菜单的激活和 ul 下拉菜单的停用。您需要有一个适当范围的变量来跟踪事件的导航项。

这是一个更新的 jsFiddle:http://jsfiddle.net/R7aTq/170/

我将插件代码移到了 JS 部分。您可以看到我添加了另一个 hoverIntent() 调用并更新了下拉函数以在打开新下拉菜单时处理关闭现有下拉菜单的问题。看看这是否适合您。