如何记住 Jquery 的最后状态? [英] How to remember last state with Jquery?

问题描述

我有一个带有可以切换的子菜单的菜单(隐藏/显示类型交易).有没有一种相对简单的方法来记住菜单的最后状态?(我在单击标题时隐藏/显示子菜单并更改标题的样式，因此背景箭头将更改(向上/向下)).它工作正常，但我希望它记住上次状态，因此当用户转到站点上的另一个页面并返回时，菜单的显示方式与用户离开时相同.我不太擅长饼干，所以任何帮助将不胜感激.是的，菜单是使用 PHP 从数据库动态生成的.现在只有 2 个带有子菜单的标题，但还会有更多标题，所以我需要一些对任意数量的子菜单可扩展"的方法.也没有必要记住它比一次访问更长.

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"> 包裹每个菜单，就像你用间歇泉一样(所以我们有一个唯一的 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);
    }
});​

要完成这项工作，请将 <h3 class="openit">Other</h3><div class="g_menu"></div> 包裹在 ><div id="other"></div> 你可以玩一个样本来在此处查看此操作.

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屋！