期待jQuery UI 的menu，先根据M2版改造一个无限层级菜单
废话少说先上代码：
$(function() {
/*init menu*/
var hideTimer;
var setHover = function(o,state) {
var p = o.parent;
if (p == null) return;
p.ishover = state;
setHover(p,state);
};
var allmenuobj = function() {
this.menus=new Array();
};
allmenuobj.prototype.add = function(menu) {
menu.num = this.menus.push(menu)-1;
return menu.num;
};
allmenuobj.prototype.get = function(num) {
if (num < this.menus.length) return this.menus[num];
return null;
};
allmenuobj.prototype.hideother = function(num) {
for (var i=0;i<this.menus.length;i++) {
this.menus[i].ishover = false;
}
if (num < this.menus.length -1 ) {
var menu = this.menus[num];
menu.ishover = true;
setHover(menu, true);
for (var i=this.menus.length-1;i>=0;i--) {
var gmenu = this.menus[i];
if (!gmenu.ishover) {
gmenu.$$.hide();
}
}
}
return false;
};
var menuObj = function(o,p,n){
this.$$ = o || null;
this.parent = p || null;
this.num = n || -1;
this.ishover = false;
};
var allmenu = new allmenuobj();
$(".demo > button").button({
icons: {
//primary: "ui-icon-home",
secondary: "ui-icon-triangle-1-s"
}
}).each(function() {
var menu = $(this).next();
var menuo = new menuObj(menu,null);
var n = allmenu.add(menuo);
menu.attr('menuindex', n)
.menu({
select: function(event, ui) {
$(this).hide();
location.href = ui.item.children('a').attr('href');
},
input: $(this)
})
.hide()
.find('li:has(ul)')
.each(function() {
var cmenu = $(this)
.find('a:eq(0)').wrapInner('<span class="ui-menu-item-text"></span>').append('<span class="ui-icon ui-icon-triangle-1-e"></span>')
.hover(
function() {
clearTimeout(hideTimer);
var ccmenu = $(this).next();
allmenu.hideother(ccmenu.attr('menuindex'));
ccmenu.menu("deactivate").show().css({top:0, left:0}).position({
my: "left top",
at: "right top",
of: this
});
},
function() {
var ccmenu = $(this).parents('ul');
var childrenMenu = $(this).next();
if (ccmenu.is(":visible")) {
hideTimer = setTimeout(function(){
childrenMenu.hide();ccmenu.hide();
},500);
}
}
).next();
var cmenuo = new menuObj(cmenu,allmenu.get($(this).parent().attr('menuindex')));
var n = allmenu.add(cmenuo);
cmenu.attr('menuindex', n)
.menu({
select: function(event, ui) {
$(this).hide();
location.href = ui.item.children('a').attr('href');
},
input: $(this)
}).hide();
});
menu.find('li:not(:has(ul))')
.each(function() {
$(this).find('a:eq(0)').hover(
function() {
clearTimeout(hideTimer);
var cmenu = $(this).parents('ul');
allmenu.hideother(cmenu.attr('menuindex'));
},
function() {
var cmenu = $(this).parents('ul');
if (cmenu.is(":visible")) {
hideTimer = setTimeout(function(){
cmenu.hide();
},500);
}
}
);
});
}).mouseover(function(event) {
clearTimeout(hideTimer);
var menu = $(this).next();
allmenu.hideother(menu.attr('menuindex'));
menu.menu("deactivate").show().css({top:0, left:0}).position({
my: "left top",
at: "left bottom",
of: this
});
}).mouseout(function(event) {
var menu = $(this).next();
if (menu.is(":visible")) {
hideTimer = setTimeout(function(){
menu.hide();
},500);
}
});
});
<style>
.ui-menu { position: absolute; z-index:9999;min-width:9em;_width:9em;}
.ui-menu-item a {
position:relative; display: inline-block;zoom: 1; overflow: visible;white-space:nowrap;
}
* html .ui-menu-item a {width:120%;}
*+html .ui-menu-item a {min-width:9em;}
.ui-menu a span.ui-icon { right: .5em; position: absolute; top: 50%; margin-top: -8px; }
.ui-menu a span.ui-menu-item-text {padding:0 2.1em 0 0;}
</style>
另外，咱不懂css，不知道怎么回事在ie6和ie7中a标签添加了箭头图标后，其它同级的a标签宽度不能自动增加，只能在样式里面重新定义，哪位大侠给俺解答一下，不胜感激。
* html .ui-menu-item a {width:120%;}/*ie6更是变态，居然要到120%才能完全充满li标签*/
*+html .ui-menu-item a {min-width:9em;}/*for ie7*/
在ie6中必须先隐藏下级菜单，才不会出现下级菜单隐藏不完全的问题，有兴趣的看官可将“childrenMenu.hide();”注销，将“for (var i=this.menus.length-1;i>=0;i--) {”改为“for (var i=0;i<this.menus.length;i++) {”然后测试（在浏览第一个菜单的时候，快速移动第二个菜单，然后再看第一个菜单）就会发现这个问题。当然能够告诉我为什么最后，不胜感激。
哪位有空也请帮忙优化一下代码，实在本人水平有限。
预览：
至于jQuery UI 1.9M2版可上googlecode下载：下载 jQuery UI 1.9 M2
修改的文件在压缩包里面。