Comment se souvenir du dernier état avec Jquery?

Question

J'ai un menu avec des sous-menus qui peuvent être basculés (masquer/montrer le deal). Y at-il un moyen relativement facile de se souvenir du dernier état du menu? (Je cache/montre le sous-menu lorsque je clique sur un en-tête et change un style de l'en-tête pour que la flèche de fond change (haut/bas)). Cela fonctionne bien, mais je voudrais qu'il se souvienne du dernier état, donc quand l'utilisateur va à une autre page sur le site et revient, le menu montre de la même manière que l'utilisateur l'a laissé. Je ne suis pas vraiment bon avec les cookies, donc toute aide sera appréciée. Ouais, le menu est généré dynamiquement à partir de la base de données en utilisant PHP. Il n'y a plus que 2 en-têtes avec des sous-menus, mais il y en aura d'autres donc j'ai besoin d'une méthode qui soit "scalable" pour n'importe quel nombre de sous-menus. Il est également inutile de s'en souvenir plus longtemps qu'une visite.

url actuelle est la suivante: http://valleyofgeysers.com/geysers.php

Answer 1

Vous pouvez utiliser la jQuery cookie plugin for this

Il suffit de régler le cookie lors de cacher, montrant, puis sur le plateau de charge ce qui est présenté en fonction des cookies. Vous pouvez le faire en nommant les témoins comme ceci: "display" - this.id

Si vous enveloppées chaque menu avec un <div id="unique"> comme vous avez avec geysers (nous avons donc un identifiant unique pour définir un cookie pour), quelque chose comme cela devrait fonctionner:

$('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); 
    } 
});​ 

Pour faire ce travail, envelopper <h3 class="openit">Other</h3><div class="g_menu"></div> dans un <div id="other"></div>You can play with a sample to see this in action here.