Как разрешить подменю по умолчанию в меню наведения jQuery - PullRequest
Новая
       9

Как разрешить подменю по умолчанию в меню наведения jQuery

1 голос
/ 27 мая 2011

Это началось с связанного вопроса .После получения блестящего ответа я столкнулся с непредвиденным пробелом в функциональности: как мне показать меню, открытое по умолчанию?

Более конкретно, если пользователь приземляется настраница, которая существует в моей под-навигации Я хочу, чтобы эта под-навигация была открыта с выделенной текущей страницей.Если они используют меню для просмотра, оно изменится соответствующим образом, но всегда вернется к состоянию по умолчанию, если они не сделают выбор.

Код, на котором я основываюсь, можно найтив этом 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 -->


Было высказано предположение, что основная идея заключается в наведении навернуть вещи к тому, что они были, и это имеет смысл, но как сохранить исходное состояние, в котором находится меню?

1 Ответ

2 голосов
/ 29 мая 2011

На основании этого кода jsFiddle один из подходов будет:

  1. Сервер устанавливает глобальную переменную на странице GBL_bNoDefaultMenu в значение true или false в зависимости от того, имеет ли эта страница подменю по умолчанию. (JS может установить переменную на страницах с расширением.)

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