活動頁面上的手風琴菜單崩潰

Question

我已經使用jQuery 1.4.3和jQuery UI 1.8.5構建了一個垂直手風琴導航，以支持手風琴小部件的懸浮式版本。

它可以按預期工作，但是當用戶導航到另一個頁面時，菜單會折疊。

有什么我忽略的東西嗎？

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>

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

每次進入新頁面時，您的手風琴都會崩潰，因為瀏覽器會從頭開始重新加載頁面。 您無法在退出頁面之前存儲手風琴的狀態。 您可以通過在用戶瀏覽器中存儲Cookie來實現此目的