如何在 jQuery 悬停菜单上允许默认子菜单

这要从一个相关问题。在得到一个出色的答案后，我遇到了一个不可预见的功能差距：如何显示默认打开的菜单？

更具体地说，如果用户登陆我的子导航中存在的页面，我希望打开该子导航并突出显示当前页面。如果他们使用菜单浏览，菜单会相应更改，但如果他们不进行选择，则始终会返回到默认状态。

我所基于的代码可以在这里找到jsfiddle.

菜单结构如下：

<div id="mnav">
    <ul id="buttons">
        <li class="one"><a href="#">Main 1</a></li>
        <li class="two"><a href="#">Main 2</a></li>
        <li class="three"><a href="#">Main 3</a></li>
        <li class="four nav-dark"><a href="#">Main 4</a></li>
    </ul>
</div><!-- /mnav -->
<div id="snav">
    <ul class="snav-one">
        <li><a href="#">Sub 1.1</a></li>
        <li><a href="#">Sub 1.2</a></li>
        <li><a href="#">Sub 1.3</a></li>
    </ul>
    <ul class="snav-two">
        <li><a href="#">Sub 2.1</a></li>
        <li><a href="#">Sub 2.2</a></li>
    </ul>
</div><!-- /snav -->

有人建议，基本思想是悬停时将事物恢复到原来的样子，这是完全有道理的，但是如何保存菜单所处的初始状态呢？

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

1. 服务器在页面中设置一个全局变量GBL_bNoDefaultMenutrue 或 false 取决于该页面是否有默认子菜单。 （JS 可以在 ajax 化页面中设置变量。）

2. 服务器还用类标记默认子菜单defaultMenu.
   EG: <ul class="snav-two defaultMenu">

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

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

4. 然后像下面这样的代码应该可以工作。
   请注意，所有主导航按钮都需要hover现在。而且，一切都被整合为一个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);
}