Jquery Superfish 菜单 - 如何向上滑动？答案

【问题标题】：Jquery Superfish menu - How to slide up?Jquery Superfish 菜单 - 如何向上滑动？
【发布时间】：2013-09-12 07:23:30
【问题描述】：

这是 superfish 菜单插件的 jquery 代码（经过我的一些修改）。我希望添加一种效果（通过 superfish 或偶然），该效果会导致子菜单在鼠标悬停时向上滑动（就像您将鼠标悬停在菜单顶部时它们向下滑动一样）。

jQuery("ul.sf-menu").supersubs({ 
        minWidth:    12,                                // minimum width of sub-menus in em units 
        maxWidth:    27,                                // maximum width of sub-menus in em units 
        extraWidth:  1                                  // extra width can ensure lines don't sometimes turn over 
                                                        // due to slight rounding differences and font-family 
    }).superfish({ 
        delay:       700,                               // delay on mouseout 
        animation:   {opacity:'show',height:'show'},    // fade-in and slide-down animation 
        speed:       'fast',                            // faster animation speed 
        autoArrows:  true,                             // disable generation of arrow mark-up 
        dropShadows: false                             // disable drop shadows
    });

【问题讨论】：

标签： jquery slide superfish

【解决方案1】：

目前你不能。直接从代码：

hideSuperfishUl : function(){
  var o = sf.op,
    not = (o.retainPath===true) ? o.$path : '';
  o.retainPath = false;
  var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
      .find('>ul').hide().css('visibility','hidden');
  o.onHide.call($ul);
  return this;
},
showSuperfishUl : function(){
  var o = sf.op,
    sh = sf.c.shadowClass+'-off',
    $ul = this.addClass(o.hoverClass)
      .find('>ul:hidden').css('visibility','visible');
  sf.IE7fix.call($ul);
  o.onBeforeShow.call($ul);
  $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
  return this;
}

可以看到 show 函数调用 animate()，而 hide 函数只是调用 hide()。

【讨论】：

【解决方案2】：

我不确定旧版本的超级鱼，但现在很容易完成（向下滑动和向上滑动） - 就像这样

$('...').superfish({
    hoverClass:    'sfhover',          // the class applied to hovered list items
    animation:     {height: "show", marginTop: "show", marginBottom: "show", paddingTop: "show", paddingBottom: "show"},   // an object equivalent to first parameter of jQuery’s .animate() method. Used to animate the submenu open
    animationOut:  {height: "hide", marginTop: "hide", marginBottom: "hide", paddingTop: "hide", paddingBottom: "hide"},   // an object equivalent to first parameter of jQuery’s .animate() method Used to animate the submenu closed
});

【讨论】：

【解决方案3】：

但是，您可以通过破解代码使其工作。我会提交一个补丁，但代码开发不是公开托管的。

hideSuperfishUl : function(){
            var o = sf.op,
                not = (o.retainPath===true) ? o.$path : '';
            o.retainPath = false;
            var $ul = $(['li.',o.hoverClass].join(''),this)
                .add(this)
                .not(not)
                // .removeClass(o.hoverClass)
                .find('>ul').animate( {opacity: 'hide', height: 'hide'}, o.speed, function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
            o.onHide.call($ul);
            return this;
        },

【讨论】：

【解决方案4】：

实现隐藏超级鱼任务的正确方法与显示相同：

hideSuperfishUl : function(){
        var o = sf.op,
        not = (o.retainPath===true) ? o.$path : '';
        o.retainPath = false;
        //hacked code by Farhan Wazir (Seejee)
    var $ul_p1 = $(['li.',o.hoverClass].join(''),this).add(this).not(not);
    var $ul_p2 = $ul_p1.find('>ul');
    var $ul = $ul_p2.animate( {opacity: 'hide', height: 'hide'}, o.speed,
        function(){ return $ul_p1.removeClass(o.hoverClass).find('>ul').css({top: '-99999em'}).addClass('sf-hidden');});
        o.onHide.call($ul);
        return this;
},

【讨论】：