如何在页面更改时保持子菜单打开 [英] How to keep a submenu open when the page changes

问题描述

  $（document）.ready（function（）{$ b $ （$（this）.attr（'class'）！='active'）{
（'＃nav> li& $（'＃nav li'）。slideUp（）; 
 $（this）.next（）。slideToggle（）; 
 $（'＃nav li a'）。removeClass（'active' ）; 
 $（this）.addClass（'active'）; 
} 
}）; 
}）; 
  

当页面更改时，让子菜单保持打开的最佳方式是什么 - 可能使用cookie或会话？

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

解决方案

可以做到使用 HTML5 LocalStorage 。

在点击处理程序，将活动菜单文本保存到localStorage：

  $（'＃nav> li> a'）。点击（函数（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（）; 
} 
}）; 
  

I have this JS code for my menu:

$(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');
     }
  });
});

what is the best way to make the sub menus stay open when the page is changed - maybe using cookies or sessions?

I have created a jsfiddle here so you can see the full html and css etc: http://jsfiddle.net/bMkEj/

解决方案

It can be done using HTML5 LocalStorage.

In the click handler, save the active menu text to localStorage:

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

On page load, read the localStorage and expand the menu (if found):

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

这篇关于如何在页面更改时保持子菜单打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！