如何用Jquery记住最后一个状态？ [英] How to remember last state with Jquery?

问题描述

我有一个菜单有子菜单，可以切换（隐藏/显示类型处理）。
有一个相对容易的方法来记住菜单的最后状态？
（我点击标题时隐藏/显示子菜单，更改标题的样式，使背景箭头改变（上/下））。
它工作正常，但我想它记住最后的状态，所以当用户去到网站上的另一个页面，并回到，菜单显示与用户离开它相同的方式。
我不是很好的饼干，所以任何帮助将不胜感激。
是的，菜单是使用PHP从db动态生成的。
现在只有两个子菜单的头，但会有更多的，所以我需要一些可扩展的任何数量的子菜单的方法。

I have a menu with submenus that can be toggled (hide/show type deal). Is there a relatively easy way to remember last state of the menu? (I hide/show submenu when clicking on a header and change a style of the header so the background arrow will change (up/down)). It works fine, but I'd like it to remember last state, so when user goes to another page on the site and gets back, the menu shows the same way as user left it. I'm not really good with cookies so any help will be appreciated. Yeah, menu is generated dynamically from the db using PHP. There are now only 2 headers with submenus, but there will be more so I'd need some method that's "scalable" for any number of submenus. There is also no need to remember it for longer then one visit.

当前网址是这样：
http://valleyofgeysers.com/geysers.php

推荐答案

您可以使用此插件的jQuery Cookie插件

只是在隐藏时设置cookie，然后在加载集上根据任何cookie设置显示什么。您可以通过命名这样的cookie来做到这一点：display - this.id

Just set the cookie when hiding, showing, then on load set what's shown based on any cookies set. You can do this by naming the cookies like this: "display" - this.id

菜单与< div id =unique> 就像你有geysers（所以我们有一个唯一的ID设置cookie），这样的东西应该工作：

If you wrapped each menu with a <div id="unique"> like you have with geysers (so we have a unique ID to set a cookie for), something like this should work:

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

http://jsfiddle.net/9GbST/rel =nofollow noreferrer>您可以在这里演示一个示例来查看此操作。

To make this work, wrap <h3 class="openit">Other</h3><div class="g_menu"></div> in a <div id="other"></div> You can play with a sample to see this in action here.

这篇关于如何用Jquery记住最后一个状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！