如何在jQuery悬停菜单上允许默认子菜单 [英] How to allow for a default submenu on a jQuery hover menu

问题描述

这是从相关问题开始的.得到出色的答案后，我在功能上遇到了无法预料的空白: 如何显示默认情况下打开的菜单?

This started from a related question. After getting a brilliant answer I ran into an unforeseen gap in functionality: how can I show a menu open by default?

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

More specifically if a user lands on a page that exists in my sub-nav I want to have that sub-nav open with the current page highlighted. If they use the menu to browse around it will change accordingly, but always go back to the default state if they don't make a selection.

基于此的代码可以在 jsfiddle 中找到.

The code I'm basing this off can be found in this 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 -->

有人建议将鼠标悬停在上面的基本想法是使事情恢复到原来的样子，这很有意义，但是如何保存菜单的初始状态?

It was suggested that the basic idea is on hover-out to set things back to the way they were and that makes perfect sense, but how do you save the initial state the menu is in?

推荐答案

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

Based on that jsFiddle code, one approach would be:

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

1. The server sets a global variable in the page GBL_bNoDefaultMenu to true or false depending on whether that page has a default sub-menu. (JS could set the variable in ajaxified pages.)

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

The server also marks the default sub-menu with the class defaultMenu.
EG: <ul class="snav-two defaultMenu">

确保页面的样式如下:

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

然后像下面的代码应该起作用.
注意，所有的主导航按钮现在都需要一个hover.另外，所有内容都已合并到一个hover()调用中.并根据生产页面，可能会进一步简化.

Then code like the following should work.
Notice that all of the main-nav buttons need a hover now. Also, Everything's been consolidated into one hover() call. And depending on the production page, further simplification may be possible.

请参阅jsFiddle上的演示.

See the demo at 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);
}

这篇关于如何在jQuery悬停菜单上允许默认子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！