Jquery记忆课

Question

我有下面的代码，并希望调整它以记住所添加的类，以便它在整个站点中应用。我遇到了Jquery：https://github.com/carhartl/jquery-cookie，并希望使用它来记住应用类。我如何拯救当前的状态？

    $.cookie('elemshow.on');    
var elemhide = $('.hide-menu'),
    elemshow = $('.show-menu, .show-menu2');

    elemhide.on('click', function(e){
        e.preventDefault();

        $('header').addClass('out-active');
        $('.header-foot').addClass('out-active');
        $('#content').addClass('full-width-added');
        setTimeout(function() {
            try {
                reconstructRn();
            } catch(err) {
            }
            window.dispatchEvent(new Event('resize'));
            elemshow.addClass('active');
        }, 300);

    });

    elemshow.on('click', function(e){
        e.preventDefault();

        $('header').removeClass('out-active');
        $('.header-foot').removeClass('out-active');
        $('#content').removeClass('full-width-added');
        elemshow.removeClass('active');
        setTimeout(function() {
            try {
                reconstructRevolution();
            } catch(err) {

            }
        }, 10);

    });

Answer 1

我会像这样调整你的代码：

/* define elemhide and elemshow */
var elemhide = $('.hide-menu'),
    elemshow = $('.show-menu, .show-menu2');

/* click functions */
elemhide.on('click', function(e){

    e.preventDefault();

    /* cookie = 1 week */
    var date = new Date();
    date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 7));
    $.cookie('menu_cookie', '0', { expires: date, path: '/' });

    /* set classes */
    $('header').addClass('out-active');
    $('.header-foot').addClass('out-active');
    $('#content').addClass('full-width-added');
    setTimeout(function() {
        try {
            reconstructRn();
        } catch(err) {
            // do something
        }
        window.dispatchEvent(new Event('resize'));
        elemshow.addClass('active');
    }, 300);

});

elemshow.on('click', function(e){

    e.preventDefault();

    /* cookie = 1 week */
    var date = new Date();
    date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 7));
    $.cookie('menu_cookie', '1', { expires: date, path: '/' });

    /* set classes */
    $('header').removeClass('out-active');
    $('.header-foot').removeClass('out-active');
    $('#content').removeClass('full-width-added');
    elemshow.removeClass('active');
    setTimeout(function() {
        try {
            reconstructRevolution();
        } catch(err) {
            // do something
        }
    }, 10);

});

/* check for existing cookie */
if (!$.cookie('menu_cookie') || $.cookie('menu_cookie') == 0) {
    $('.hide-menu').trigger('click');
} else if ($.cookie('menu_cookie') == 1) {
    $('.show-menu').trigger('click');
}

这里有一个小提琴：http://jsfiddle.net/Niffler/B8XBg/，我不知道你的HTML，所以我只是用颜色.