活动页面上的手风琴菜单崩溃

Question

I've built a vertical accordion nav with jQuery 1.4.3 and jQuery UI 1.8.5 in order to support the hoverintent version of the accordion widget.

It works as expected, however the menu collapses when the user navigates to another page.

Is there something that I have overlooked?

The HTML

<nav class="span3">
<a href="index.html"><img src="img.png" width="250" /></a>
<ul class="wrap" id="mainNav">
    <li>
        <a href="javascript:void(0);" class="accordionButton">Lorem</a>
        <ul class="accordionContent" style="display: none;">
            <li>
                <a href="javascript:void(0);">Ipsum</a>
            </li>
            <li class="">
                <a href="javascript:void(0);">Dolor</a>
            </li>
            <li>
                <a href="javascript:void(0);">Sit</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0);" class="accordionButton accordionButton noChild">Amet</a>
    </li>
    <li>
        <a href="javascript:void(0);" class="accordionButton accordionButton noChild">Consectetur</a>
    </li>
    <li>
        <a href="javascript:void(0);" class="accordionButton accordionButton noChild">Adipiscing</a>
    </li>
    <li>
        <a href="javascript:void(0);" class="accordionButton accordionButton noChild">Elit</a>
    </li>
</ul>
</nav>

The JavaScript

// verticle menu
function vertAccordHover() {"use strict";
    $accButtons.mouseover(function() {
        $(this).addClass('hover');
    }).mouseout(function() {
        $(this).removeClass('hover');
    });
}

function vertAccord() {"use strict";

    $("#mainNav").accordion({
        event : "mouseover",
        alwaysOpen : false,
        autoHeight : false,
        navigation : true,
        collapsible : true
    });

    $('.noChild').unbind('mouseover');
    $('#mainNav').accordion('activate', 0);                
    $('#mainNav').accordion( "option", "navigation", true );

    vertAccordHover();
}

Answer 1

Your accordion would collapse every time you go to a new page because your browser reloads the page from scratch. You don't have a way to store the state of your accordion before exiting a page. You could probably do this by storing a cookie on your user's browser