我用jquery为菜单编写了这个插件 此插件成功在Chrome中运行但在IE或其他浏览器中无法正常工作... 错误有这个: 当我点击菜单,菜单打开但悬停时子菜单子菜单不打开 此错误适用于除Chrome以外的所有浏览器... 在chrome中,此菜单在悬停时正确打开子菜单
$(function () {
$.fn.extend({
hMenu: function (options) {
var settings = {
menuItem: '',
subMenuSelector: 'div.sub-menu',
subSubMenuSelector: 'div.sub-menu ul li',
opp: 'a.outdoor',
closeDuration: 150,
openDuration: 350
};
var style = {
"display": "block",
clear: "both"
}
if (options != null) {
$.extend(settings, options);
}
var _base = $(this);
var _id = "";
init();
function init() {
if (settings.menuItem == '' || settings.subMenuItem == '') { return; }
$(settings.menuItem, _base).each(function () {
if ($(settings.subMenuSelector, $(this).parent()).length > 0) {
$(this).click(function () {
$(settings.subMenuSelector + ':visible', _base).fadeOut(settings.closeDuration);
if ($(settings.subMenuSelector, $(this).parent()).is(':visible')) {
$(settings.subMenuSelector, $(this).parent()).slideUp(settings.closeDuration);
$('html').unbind('click');
}
else {
//Show My Sub menu
$(settings.subMenuSelector, $(this).parent()).fadeIn(settings.openDuration);
$(settings.subMenuSelector, $(this).parent()).click(function () {
cancelEvent();
});
// And Do not anything else !!!!!! (cancel event !)
cancelEvent();
// $(settings.subSubMenuSelector).click(function () {
// $(settings.subMenuSelector).animate({ width: "700px", height: "700px" });
//
// })
if (settings.subSubMenuSelector == "") { return; }
// $(settings.subSubMenuSelector).mouseover(function () {
// $(this).css("color","red");
// });
$(settings.subSubMenuSelector).hover(function () {
var id = $(this).attr("id");
_id = id;
$("a." + id + "").show(function () {
$('a.' + id + '').css('display', 'block');
}); //show callback
//alert(id);
}, function () {
$('a.' + _id + '').hide('slow');
}); //subsubmenuselector.hover
//If user clicke on html , close current sub-menu
$('html').bind('click', function () {
$(settings.subMenuSelector, $(this).parent()).fadeOut(settings.closeDuration);
});
}
});
}
});
}
function cancelEvent() {
if (event && event.stopPropagation) {
event.stopPropagation();
}
else if (e && e.preventDefault) {
e.preventDefault(); // DOM style
}
else { // IE hack
window.event.cancelBubble = true;
}
}
} //function
}); //plugin definition
});