jQuery slideDown和slideUp-如何保留页面更改语句

Question

I have created a menu which uses jQuery slideDown/slideUp to show/hide menu items. Jquery code looks like

$(".menu-reveal a").click(function() {
    if ($(".menu").is(":visible")) {
        $(".menu").slideUp(300);
        $(".menu-reveal").removeClass("revealed");
    } else {
        $(".menu").slideDown(300);
        $(".menu-reveal").addClass("revealed");
    }
});

Site is loading by default with "hidden" menu items, then visitor needs to click it to see menu items.

My question is how I can "keep" menu statement if was expanded or not on page change? For an example I want to have it shown on next page when it was expanded on a previous page.

Answer 1

Here is working code:

    $(".menu-reveal a").click(function() {
    if ($(".menu").is(":visible")) {
        $.removeCookie("top-menu", { path: '/' });
        $(".menu").slideUp(300);
        $(".menu-reveal").removeClass("revealed");
    } else {
        $(".menu").slideDown(300);
        $(".menu-reveal").addClass("revealed");
        $.cookie("top-menu", 1, { path: '/' });
    }
});

// Permanent top menu
    var cookieTopMenu = $.cookie("top-menu");

    if (cookieTopMenu == 1){
        $(".menu").slideDown(1);
        $(".menu-reveal").addClass("revealed");     }
    else {
        $(".menu").slideUp(1);
        $(".menu-reveal").removeClass("revealed");
    }

I have used jQuery cookie plugin to achieve desired results.

Hope it will helps somebody else.