Как сохранить состояние кнопки переключения меню между запросами с помощью jQuery?

Question

Как сохранить состояние кнопки переключения меню между запросами с помощью jQuery?

Я создаю веб-сайт для мобильных устройств, и у меня есть эта функция jQuery, которая показывает или скрывает главное меню в зависимости от того, что пользователь выбирает:

$(function() {



    $('#nav_toggle').on('click', function(event) {  

        $('#main_nav').slideToggle();

        $(this).toggleClass("collapsed");

        event.preventDefault();  

    });



});

Моя проблема: как я могу сохранить (или Не сохранить) класс collapsed в моем меню через запросы?

Прямо сейчас пользователь должен переключать меню на каждой странице.

Было бы неплохо каким-то образом сохранить его в запросах, возможно, установив куки?

Как это можно сделать?

Я довольно новичок в jQuery, поэтому образец кода был бы очень признателен.

Спасибо за любую помощь.

480 5

jQuery

5 ответов:

Comments

Ничего не найдено.

Imran · Accepted Answer · 2014-06-12 16:01:47

Если вы используете HTML5, я бы предпочел localstorage:
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); 

Hitesh Chandwani · Accepted Answer · 2014-06-12 15:20:32

Да, вы можете сохранить файл cookie и использовать его на всех страницах

document.cookie="username=John Smith; path=/";

Получить код куки
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}
В нижнем колонтитуле напишите что-нибудь вроде этого
$(document).ready(function(){

    if(getCookie(cookiename)!=''){

      $('menuIdOrClass').addClass('class Name Which keep menu open')

     }

});
Soruce - http://www.w3schools.com/js/js_cookies.asp

Dexa · Accepted Answer · 2014-06-12 15:27:00

Вы можете попытаться прикрепить строку запроса или хэш к вашему URL-адресу и передать состояние меню таким образом. Или вы можете использовать куки.

Вот код для установки / получения cookie в JavaScript.
function setCookie(value) {
    var expires = "; ";
    if (config.cookie_duration) {
        var date = new Date();
        date.setDate(date.getDate() + config.cookie_duration);
        expires = "; expires=" + date.toGMTString() + "; ";
    }   
    document.cookie = "SELECTED_STATE=" + value + expires + "path=/";
}

function getCookie() {
    var name = "SELECTED_STATE=";
    var c_arr = document.cookie.split(';');
    for (var i = 0; i < c_arr.length; i++) {
        var c = c_arr[i];
        while (c.charAt(0) == ' ')
            c = c.substring(1, c.length);

        if (c.indexOf(name) == 0)
            return c.substring(name.length, c.length);
    }
    return null;
}
Отказ от ответственности: я нашел основную идею давным-давно где-то в Интернете, я не помню, откуда именно. Он модифицирован в соответствии с потребностями одного проекта, над которым я работал, поэтому я просто скопировал его здесь.

urbz · Accepted Answer · 2014-06-12 15:29:40

Я бы рекомендовал сохранить значение в файле cookie (как вы упомянули), а затем установить его на загрузку страницы.

Загрузите плагин jQuery cookieздесь. Теперь установите значение:
$.cookie("cookie_name", "cookie_value");
А затем в вашем document.ready() обработчик вы можете вытащить значение..
$.cookie("cookie_name);
..и установите его соответствующим образом с чем-то, напоминающим ваш текущий click() функция.

Tintin81 · Accepted Answer · 2017-05-23 14:44:42

Спасибо, user1041953 , за то, что обратили мое внимание на localStorage. Это намного проще в использовании, чем печенье, я думаю.

Вот что у меня получилось:
$('#nav_toggle').click(function(event) {
  $('#main_nav').toggle();
  localStorage.setItem('display', $('#main_nav').is(':visible'));
  event.preventDefault(); 
});

var block = localStorage.getItem('display');
if (block == 'false') {
  $('#main_nav').hide();
} else {
  $('#main_nav').show();
}