javascript - Jquery Cookie 内存类

Question

我有以下代码，我想调整它以记住添加的类，以便它在整个站点中应用。我遇到过 Jquery Cookie: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');
}

这是一个 fiddle :http://jsfiddle.net/Niffler/B8XBg/我不知道您的 HTML，所以我只使用颜色...