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

如何解决如何在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”中的全局​​变量设置为true或false，具体取决于该页面是否具有默认子菜单。 （JS可以在ajaxified页面中设置变量。） 服务器还将默认子菜单标记为“ 2”类。 EG：

<ul class=\"snav-two defaultMenu\">

确保页面具有如下样式：

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

然后像下面的代码应该工作。 注意，所有的主导航按钮现在都需要一个

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);
}