Question

我使用以下代码滑动导航菜单

$(document).ready(function(){
 $("#flipnav").click(function(){
    $("nav").slideToggle("slow");
    }); 
});

但是在浏览到另一个页面或刷新导航时又回来了。但如何保留此更改，以便导航保持隐藏，直到用户再次单击以显示导航并保持相同（隐藏），即使浏览到另一个页面？

另外

if(sessionStorage["navigationMoved"]== "true"){

  $(document).ready(function(){
 $("#flipnav").ready(function(){
    $("nav").slideToggle("slow");
    }); 
}); 

 $(document).ready(function(){
$('#flipnav').toggle(function(){
  $('#content').animate({
   top:"0%"
 });
}, 

function(){
  $('#content').animate({
  top:"2%"
  });     
});
});

}

Answer 1

您可以直接在每个页面的HTML中对菜单中的更改进行硬编码，或者如果您不能使用Cookie或本地存储，则HTML是无状态的，并且不记得您在新页面后所做的更改负荷。

修改

Jeezes

你必须存储或不存储菜单在每个slideToggle上都可见，然后在pageload上检查该值以相应地设置菜单

var isSet = localStorage.getItem('nav'); document.getElementsByTagName('nav')[0].style.display = isSet ? 'block' : 'none'; $(document).ready(function () { $("#flipnav").click(function () { $("nav").slideToggle("slow", function() { localStorage.setItem('nav', $("nav").is(':visible')); }); }); });

我倾向于使用localStorage，但是sessionStorage是同一个HTML5网络存储API的一部分，因此如果只是会话的持久性就是您正在寻找的内容，那么您可以使用它。

对于较旧的浏览器MDN有一个可以回退到Cookie的polyfill，因此您可以始终使用网络存储语法，而无需担心不支持的浏览器。

Answer 2

您必须在页面加载并重置操作时进行检查。您可以使用sessionStorage在页面重新加载或更改之间保存信息。

所以

$(document).ready(function(){
 $("#flipnav").click(function(){
    $("nav").slideToggle("slow");
    }); 
    sessionStorage["navigationMoved"] = true;
});

然后，当您加载新页面时，您必须拥有代码

if(sessionStorage["navigationMoved"]){
    $(document).ready(function(){
       $("#flipnav").click(function(){
       $("nav").slideToggle("slow");
     }); 
     }); 
}

当您重新加载页面时，它会根据提供的HTML / Javascript / CSS完全重新呈现网站。因此，除非您明确保存并检查信息，否则它不会“记住”以前的状态

如何维护页面更改时保留的jquery更改？

2 个答案: