javascript - 如何在页面更改时保持子菜单打开

Question

我的菜单有这个 JS 代码:

$(document).ready(function () {
  $('#nav > li > a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#nav li ul').slideUp();
       $(this).next().slideToggle();
       $('#nav li a').removeClass('active');
       $(this).addClass('active');
     }
  });
});

在页面更改时使子菜单保持打开状态的最佳方法是什么 - 也许使用 cookie 或 session ？

我在这里创建了一个 jsfiddle，所以你可以看到完整的 html 和 css 等:http://jsfiddle.net/bMkEj/

Answer 1

可以使用 HTML5 LocalStorage 来完成.

在点击处理程序中，将事件菜单文本保存到 localStorage:

$('#nav > li > a').click(function(e){
   ...
   localStorage.setItem("activeSubMenu", $(this).text());
});

在页面加载时，读取 localStorage 并展开菜单(如果找到):

$(document).ready(function(){
    var activeItem = localStorage.getItem("activeSubMenu");
    if(activeItem){
        $('#nav > li > a').filter(function() {
            return $(this).text() == activeItem;
        }).slideToggle();
    }
});