如何在点击而不是hover时打开Superfish jQuery菜单？
我已经在网上快速浏览了Joel Birch实施的Superfish菜单，该菜单适用于onclick，而不是hover。
在Github找到了Karl Swedberg的链接，看起来像是票。
https://gist.github.com/917446
它就像一个魅力，直到我点击一个活动的链接，此时菜单关闭，似乎返回false。
如何让它导航到实际的链接目的地？
改变这一行（第21行，超过函数）：
$$.showSuperfishUl().siblings().hideSuperfishUl(); 对此：
$$.click(function(){$(this).showSuperfishUl().siblings().hideSuperfishUl();});
用于单击菜单的完整超级鱼代码：
/* * Superfish v1.4.8 - jQuery menu widget * Copyright (c) 2008 Joel Birch * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt */ ;(function($){ $.fn.superfish = function(op){ var sf = $.fn.superfish, c = sf.c, $arrow = $([' »'].join('')), over = function(){ var $$ = $(this), menu = getMenu($$); clearTimeout(menu.sfTimer); $$.click(function(){$(this).showSuperfishUl().siblings().hideSuperfishUl();}); }, out = function(){ var $$ = $(this), menu = getMenu($$), o = sf.op; clearTimeout(menu.sfTimer); menu.sfTimer=setTimeout(function(){ o.retainPath=($.inArray($$[0],o.$path)>-1); $$.hideSuperfishUl(); if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);} },o.delay); }, getMenu = function($menu){ var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0]; sf.op = sf.o[menu.serial]; return menu; }, addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); }; return this.each(function() { var s = this.serial = sf.o.length; var o = $.extend({},sf.defaults,op); o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){ $(this).addClass([o.hoverClass,c.bcClass].join(' ')) .filter('li:has(ul)').removeClass(o.pathClass); }); sf.o[s] = sf.op = o; $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() { if (o.autoArrows) addArrow( $('>a:first-child',this) ); }) .not('.'+c.bcClass) .hideSuperfishUl(); var $a = $('a',this); $a.each(function(i){ var $li = $a.eq(i).parents('li'); $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);}); }); o.onInit.call(this); }).each(function() { var menuClasses = [c.menuClass]; if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass); $(this).addClass(menuClasses.join(' ')); }); }; var sf = $.fn.superfish; sf.o = []; sf.op = {}; sf.IE7fix = function(){ var o = sf.op; if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined) this.toggleClass(sf.c.shadowClass+'-off'); }; sf.c = { bcClass : 'sf-breadcrumb', menuClass : 'sf-js-enabled', anchorClass : 'sf-with-ul', arrowClass : 'sf-sub-indicator', shadowClass : 'sf-shadow' }; sf.defaults = { hoverClass : 'sfHover', pathClass : 'overideThisToUse', pathLevels : 1, delay : 200, animation : {opacity:'show'}, speed : 'fast', autoArrows : true, dropShadows : true, disableHI : false, // true disables hoverIntent detection onInit : function(){}, // callback functions onBeforeShow: function(){}, onShow : function(){}, onHide : function(){} }; $.fn.extend({ 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; } }); })(jQuery);
Karl发布了一个快速更新来帮助我解决GitHub ..这里： https ： //gist.github.com/652684对我来说不太合适。
从下面的链接中获取我的工作代码。
http://www.nilinks.com/home-owner/wp-content/themes/acheson/js/superfish.js
更新..只是因为链接永远死了..
/* * Superfish v1.4.8 - jQuery menu widget * Copyright (c) 2008 Joel Birch * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt */ ;(function($){ $.fn.superfish = function(op){ var sf = $.fn.superfish, c = sf.c, $arrow = $([' »'].join('')), over = function(){ var $this = $(this), menu = getMenu($this); clearTimeout(menu.sfTimer); $this.showSuperfishUl().siblings().hideSuperfishUl(); }, out = function(){ var $this = $(this), menu = getMenu($this), o = sf.op; clearTimeout(menu.sfTimer); menu.sfTimer=setTimeout(function(){ o.retainPath=($.inArray($this[0],o.$path)>-1); $this.hideSuperfishUl(); if (o.$path.length && $this.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);} },o.delay); }, getMenu = function($menu){ var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0]; sf.op = sf.o[menu.serial]; return menu; }, addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); }; return this.each(function() { var $this = $(this); var s = this.serial = sf.o.length; var o = $.extend({},sf.defaults,op); o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){ $(this).addClass([o.hoverClass,c.bcClass].join(' ')) .filter('li:has(ul)').removeClass(o.pathClass); }); sf.o[s] = sf.op = o; // CHANGED: by KARL SWEDBERG if ( (o.eventType === 'hoverIntent' && !$.fn.hoverIntent) || !(/^(?:hover|hoverIntent|toggle)$/).test(o.eventType) ) { o.eventType = 'hover'; } $this.find('li:has(ul)')[o.eventType](over,out).each(function() { if (o.autoArrows) { addArrow( $('>a:first-child',this) ); // this.addClass("yourClass"); } }) .not('.'+c.bcClass) .hideSuperfishUl(); $this.find('a').each(function(i){ var $a = $(this), $li = $a.parents('li'); $a.focus(function(){over.call($li);}).blur(function(){out.call($li);}); $a.click(function(event) { event.preventDefault(); if ( !$a.hasClass("sf-with-ul") ) { location.href = this.href; } }); }); o.onInit.call(this); }).each(function() { var menuClasses = [c.menuClass]; if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) { menuClasses.push(c.shadowClass); } $(this).addClass(menuClasses.join(' ')); }); }; var sf = $.fn.superfish; sf.o = []; sf.op = {}; sf.IE7fix = function(){ var o = sf.op; if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined) { this.toggleClass(sf.c.shadowClass+'-off'); } }; sf.c = { bcClass : 'sf-breadcrumb', menuClass : 'sf-js-enabled', anchorClass : 'sf-with-ul', arrowClass : 'sf-sub-indicator', shadowClass : 'sf-shadow' }; sf.defaults = { hoverClass : 'sfHover', pathClass : 'overideThisToUse', pathLevels : 1, delay : 800, animation : {opacity:'show'}, speed : 'normal', closeAnimation: {opacity: 'hide'}, closeSpeed: 0, autoArrows : true, dropShadows : true, // CHANGED: by KARL SWEDBERG eventType : 'toggle', // one of 'toggle', 'hover', or 'hoverIntent' // disableHI : false, // true disables hoverIntent detection onInit : function(){}, // callback functions onBeforeShow: function(){}, onShow : function(){}, onHide : function(){} }; $.fn.extend({ hideSuperfishUl : function(){ var o = sf.op, not = (o.retainPath===true) ? o.$path : ''; o.retainPath = false; var $closingLi = $(['li.',o.hoverClass].join(''),this).add(this).not(not); var $ul = $closingLi .find('>ul'); $ul.animate(o.closeAnimation, o.closeSpeed, function() { $closingLi.removeClass(o.hoverClass); $ul.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; } }); })(jQuery);
如果有人来到这里寻找这个答案，同时在drupal中使用superfish模块（我正在使用drupal 8模块）。 我根本没有修改superfish库。 我做了以下是在我的js文件中，它似乎工作正常（在chrome和firefox上测试）。
以下代码禁用鼠标hover时菜单下拉。 单击父菜单项时，菜单会下拉，实际上不会转到父href。
$('#superfish-main > li > a.menuparent').on('mouseover click', function(event) { return false; });
我没有使用superfish作为我的移动菜单，所以我没有在手机上测试上面的内容，但我想你需要做一些工作才能得到它你想要它的方式。
编辑
由于某些原因，上述内容并不适用于safari。 以下适用于chrome，safari和firefox
$('#superfish-main > li > a').on('mouseover', function(event) { return false; }); $('#superfish-main > li > a.menuparent').on('click', function(event) { // Close any open dropdown menus. $.each($(this), function(index, element) { $(element).parent().parent().find('li.menuparent > ul').addClass('sf-hidden'); }); // Open the clicked dropdown menu. $(this).next().removeClass('sf-hidden'); event.preventDefault(); });