Question

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

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

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。

获取手风琴饼干以记住链接状态

1 个答案: