更新时间:2022-11-16 17:25:35
可以做到使用 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();
}
});