Как запомнить последнее состояние с Jquery?

Question

У меня есть меню с подменю, которое можно переключать (скрывать / показывать тип сделки). Есть ли относительно простой способ запомнить последнее состояние меню? (Я скрываю / показываю подменю при нажатии на заголовок и изменяю стиль заголовка, чтобы фоновая стрелка изменялась (вверх / вниз)). Он работает нормально, но я бы хотел, чтобы он запомнил последнее состояние, поэтому, когда пользователь переходит на другую страницу сайта и возвращается, меню отображается так же, как пользователь покинул его. Я не очень хорошо разбираюсь в печеньках, поэтому любая помощь будет оценена. Да, меню генерируется динамически из БД с использованием PHP. Теперь есть только 2 заголовка с подменю, но их будет больше, поэтому мне нужен какой-то метод, который «масштабируется» для любого количества подменю. Также нет необходимости запоминать это дольше, чем одно посещение.

Текущий URL-адрес: http://valleyofgeysers.com/geysers.php

Answer 1

Вы можете использовать плагин cookie jQuery для этого

Просто установите куки при скрытии, показе, а затем при загрузке установите то, что показано на основе любого набора куки. Вы можете сделать это, назвав файлы cookie следующим образом: "display" - this.id

Если вы обернули каждое меню <div id="unique">, как у вас с гейзерами (поэтому у нас есть уникальный идентификатор, для которого мы хотим установить cookie), что-то вроде этого должно работать:

$('h3').next('.g_menu').filter(function() {
  return $.cookie("expanded-" + $(this).parent("[id]").attr("id"));
}).hide();

$('h3').click(function(){
  $(this).toggleClass('closeit').toggleClass('openit');
  var menu = $(this).next('.g_menu');
    if(menu.is(':visible')) {
        menu.fadeOut(50);
        $.cookie("expanded-" + $(this).parent().attr("id"), true);
    } else {
        menu.fadeIn(980);            
        $.cookie("expanded-" + $(this).parent().attr("id"), null);
    }
});​

Чтобы сделать это, оберните <h3 class="openit">Other</h3><div class="g_menu"></div> в <div id="other"></div> . Вы можете поиграть с образцом, чтобы увидеть это в действии здесь .