这里有点 jquery 新手,所以放轻松。
基本上我正在尝试将 hoverIntent 插入此下拉菜单:
http://www.sooperthemes.com/open-source/jquery/jquery-sooperfish-dropdown-menus
我已经坚持了几天了,我知道这可能很简单,但我似乎找不到合适的选择器来应用意图函数。
任何帮助,将不胜感激。
- 更新 -
我想我几乎拥有它,只是有些不太对劲。我已经更新了下面的js。
悬停意图代码位于底部
$.fn.sooperfish = function(op) {
var sf = $.fn.sooperfish;
sf.o = [];
sf.op = {};
sf.c = {
menuClass : 'sf-js-enabled',
isParent : 'sf-parent',
arrowClass : 'sf-arrow'
};
if ($.easing.easeOutOvershoot) { //set default easing
sooperEasingShow = 'easeOutOvershoot';
} else {
sooperEasingShow = 'linear';
};
if ($.easing.easeInTurbo) {
sooperEasingHide = 'easeInTurbo';
} else {
sooperEasingHide = 'linear';
};
sf.defaults = {
multiColumn : true,
dualColumn : 12, //if a submenu has at least this many items it will be divided in 2 columns
tripleColumn : 18, //if a submenu has at least this many items it will be divided in 3 columns
hoverClass : 'sfHover',
delay : 500, //make sure menus only disappear when intended, 500ms is advised by Jacob Nielsen
animationShow : {height:'show',delay:'500'},
speedShow : 400,
easingShow : sooperEasingShow,
animationHide : {height:'hide',opacity:'hide'},
speedHide : 0,
easingHide : sooperEasingHide,
autoArrows : true, //Adds span elements to parent li elements, projecting arrow images on these items to indicate submenus. I added an alternative image file with white arrows.
onShow : function(){}, //callback after showing menu
onHide : function(){} //callback after hiding menu
};
//Merge default settings with o function parameter
var o = $.extend({},sf.defaults,op);
if (!o.sooperfishWidth) {
o.sooperfishWidth = $('ul:first li:first', this).width(); //if no width is set in options try to read it from DOM
} else {
$('ul li', this).width(o.sooperfishWidth) //if width is set in invocation make sure this width is true for all submenus
}
this.each(function() {
//Check dom for submenus
var parentLi = $('li:has(ul)', this);
parentLi.each(function(){
if (o.autoArrows) { //Add autoArrows if requested
$('>a',this).append('<span class="'+sf.c.arrowClass+'"></span>');
}
$(this).addClass(sf.c.isParent);
});
$('ul',this).css({left: 'auto',display: 'none'}); //The script needs to use display:none to make the hiding animation possible
//Divide menu in columns
//Set width override
if (o.multiColumn) {
var uls = $('ul',this);
uls.each(function(){
var ulsize = $('>li:not(.backLava)',this).length; //Skip list items added by Lavalamp plugin
if (ulsize >= o.dualColumn) {
if (ulsize >= o.tripleColumn) {
$(this).width(3*o.sooperfishWidth).addClass('multicolumn triplecolumn');
} else {
$(this).width(2*o.sooperfishWidth).addClass('multicolumn dualcolumn');
}
}
});
}
var root = this, zIndex = 1000;
function getSubmenu(ele) {
if (ele.nodeName.toLowerCase() == 'li') {
var submenu = $('> ul', ele);
return submenu.length ? submenu[0] : null;
} else {
return ele;
}
}
function getActuator(ele) {
if (ele.nodeName.toLowerCase() == 'ul') {
return $(ele).parents('li')[0];
} else {
return ele;
}
}
function hideSooperfishUl() {
var submenu = getSubmenu(this);
if (!submenu) return;
$.data(submenu, 'cancelHide', false);
setTimeout(function() {
if (!$.data(submenu, 'cancelHide')) {
$(submenu).animate(o.animationHide,o.speedHide,o.easingHide,function(){ o.onHide.call(submenu); });
}
}, o.delay);
}
function showSooperfishUl() {
var submenu = getSubmenu(this);
if (!submenu) return;
$.data(submenu, 'cancelHide', true);
$(submenu).css({zIndex: zIndex++}).animate(o.animationShow,o.speedShow,o.easingShow, function(){ o.onShow.call(submenu); });
if (this.nodeName.toLowerCase() == 'ul') {
var li = getActuator(this);
$(li).addClass('hover');
$('> a', li).addClass('hover');
}
}
// Bind Events. Yes it's that simple!
$('li', this).unbind().hover(showSooperfishUl, hideSooperfishUl);
$("ul#nav li.current").hoverIntent(
{
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
hoverIntent: showSooperfishUl, // function = onMouseOver callback (REQUIRED)
timeout: 200, // number = milliseconds delay before onMouseOut
out: hideSooperfishUl, // function = onMouseOut callback (REQUIRED) );
})
});
};