如何在jQueryhover菜单上允许默认子菜单

这是从一个相关问题开始的。 得到一个精彩的答案后，我遇到了一个无法预料的function差距： 如何默认显示一个菜单？

更具体地说，如果用户登陆我的子导航中存在的页面，我希望打开该子导航，并突出显示当前页面。 如果他们使用菜单浏览它会相应地改变，但如果他们没有做出选择，总是回到默认状态。

我正在以此为基础的代码可以在这个jsfiddle中找到。

菜单结构如下：

 
 
Main 1
 
Main 2
 
Main 3
 
Main 4
 
 
 
 
 
Sub 1.1
 
Sub 1.2
 
Sub 1.3
 
 
 
Sub 2.1
 
Sub 2.2
 
 
 

有人提出，基本的想法是将鼠标hover在原来的状态，这样才能完全正确，但是如何保存菜单所处的初始状态呢？

Answer 1

基于该jsFiddle代码，一种方法是：

1. 服务器将页面GBL_bNoDefaultMenu的全局变量设置为true或false，具体取决于该页面是否具有默认子菜单。 （JS可以在ajaxified页面中设置变量。）

2. 服务器还使用类defaultMenu标记默认子菜单。
   EG：

3. 确保页面具有以下样式：

    #snav ul.defaultMenu { display: block; /* Or the correct visible display mode.*/ } 

4. 然后像下面的代码应该工作。
   请注意，所有主导航按钮现在都需要hover 。 此外，Everything已合并为一个hover()调用。 并且根据生产页面，可以进一步简化。

请参阅jsFiddle上的演示。

 $("#buttons li, #snav ul").hover (function (zEvent) {MenuOpenCloseErgoTimer (zEvent); } ); function MenuOpenCloseErgoTimer (zEvent) { var dDelay; var ActionFunction = null; if (zEvent.type == 'mouseenter') { if (zEvent.currentTarget.nodeName == 'LI') //-- Main nav. { dDelay = 300; ActionFunction = function (node) { //--- The first class is a special tie to a submenu, if it exists var subnav = 'ul.snav-' + $(node).attr ('class').split (' ')[0]; $("#snav ul").hide (); $("#snav").find (subnav).show (); //--- Not sure what's going on with the "open" class. It's irrelevant to this demo. if (GBL_bNoDefaultMenu) $("#snav").stop (true, true).slideDown ('fast').addClass ("open"); }; } else //-- zEvent.currentTarget.nodeName == 'UL' //-- Sub nav. { dDelay = 0; ActionFunction = function (node) { $(node).show (); if (GBL_bNoDefaultMenu) $("#snav").stop (true, true).slideDown ('fast').addClass ("open"); }; } } else //-- zEvent.type == 'mouseleave' { //--- Actions for main nav and sub nav are the same. dDelay = 200; ActionFunction = function (node) { if (GBL_bNoDefaultMenu) $("#snav").stop (true, true).slideUp ('fast').removeClass ("open"); $("#snav ul").hide (); $("#snav ul.defaultMenu").show (); } } if (typeof this.delayTimer == "number") { clearTimeout (this.delayTimer); } this.delayTimer = setTimeout (function() { ActionFunction (zEvent.currentTarget); }, dDelay); }