使用 cookie 获取手风琴以记住链接状态

Question

我使用了这里的代码http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu-with-cookies/ 并对其进行了一些修改以适合我的项目，它运行得非常好。现在我有两个似乎无法克服的障碍。

1: cookie 是否也可能存储我点击的最后一个链接的状态？就像给它上课，这样我就可以用 css 应用另一种背景颜色？如果我单击其中一个子 uls 中的链接，我猜它必须再次删除该类，所以一次只有一个链接处于活动状态。

2：当我通过单击手风琴上方的徽标刷新页面时，它保持打开状态。我希望它再次崩溃，就像我第一次访问该网站时一样。

棘手的东西。我有一个工作演示 here（无法在 jsfiddle 上运行）

这是JS：

$(document).ready(function () {
  var checkCookie = $.cookie("nav-item");
  if (checkCookie != "") {
    $('#nav > li > a:eq('+checkCookie+')').addClass('active').next().show();
  }
  $('#nav > li > a').click(function(){
      var navIndex = $('#nav > li > a').index(this);
      $.cookie("nav-item", navIndex);
      $('#nav li ul').slideUp();
       if ($(this).next().is(":visible")){
           $(this).next().slideUp();
       } else {
       $(this).next().slideToggle();
       }
       $('#nav li a').removeClass('active');
       $(this).addClass('active');
  });
});

提前非常感谢！

Answer 1

要回答您的第一个问题，它已经这样做了。这就是活动链接更暗的原因。查看该行的标签并更改不同颜色的值：

#nav li a:hover, #nav li a.active {background: #999; color: #fff;}

如果您希望每个人在活动时具有不同的颜色，这也是可能的，但您会希望为它们提供唯一的 ID（类似于类，但通常每个元素都是唯一的）并使用 CSS 选择器修改它们的属性。

对于第二个问题，请尝试删除此行：

if (checkCookie != "") {
    $('#nav > li > a:eq('+checkCookie+')').addClass('active').next().show();
    }

因为它会在页面加载后检查 cookie 的存储值。它没有在本地为我保存 cookie，所以我无法验证它是否有效。您可能希望在页面加载时清除 nav-item cookie。