0

菜单 ul 类将在顶部拉伸全宽，当悬停 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);
4

1 回答 1

0

尝试单独hoverIntent()检查ul。这样，您将能够控制下拉菜单的li激活和ul. 您需要有一个适当范围的变量来跟踪活动的导航项。

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

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

于 2013-03-30T23:52:49.057 回答