jquery - 如何使用 Jquery 记住最后的状态？

Question

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

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

Answer 1

您可以使用jQuery cookie plugin for this

只需在隐藏、显示时设置 cookie，然后在加载时根据任何 cookie 集设置显示的内容。您可以通过如下方式命名 cookie 来实现此目的:"display" - this.id

如果您用 <div id="unique"> 包装每个菜单就像间歇泉一样(所以我们有一个唯一的 ID 来设置 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> You can play with a sample to see this in action here .